Null or undefined values are never in your control when your app is talking to in-house developed APIs or third-party APIs. So when null or undefined values do occur in your data, your app should handle them gracefully. Your user experience should not look obscure. Thankfully, there is out-of-the-box (OOB) capability in Angular to handle null or undefined data called the safe navigation operator.
In this guide, we will take a look at how to use the safe navigation operator with the help of a real-world scenario: creating a small page that will render thumbnails of technical events on any website (e.g., Pluralsight.com).
To implement the steps in this guide, you must have the following:
Execute the following command to create an Angular project.
ng new safenavigation-demo
We will install Twitter Bootstrap and jQuery and refer them in our project to use Bootstrap styles to improve user experience.
cd safenavigation-demo
npm i jquery
npm i bootstrap
In Visual Studio Code, open the file angular.json
.
styles
array before src/style.css
."node_modules/bootstrap/dist/css/bootstrap.min.css",
scripts
array:"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
In Visual Studio Code, open the file src > index.html
.
class="container"
The final code should look like this:
1<body class="container">
2 <app-root></app-root>
3</body>
Now the project is all set to develop the events page.
ng generate component event-thumbnail
1import { Component, Input, Output, EventEmitter } from '@angular/core';
2
3@Component({
4 selector:'app-event-thumbnail',
5 templateUrl:'./event-thumbnail.component.html',
6 styles:[`
7 .green { color:#003300 !important; }
8 .bold { font-weight:bold; }
9 .thumbnail { min-height: 210px; padding-left: 10px; background-color:#343a40; margin-bottom:10px; }
10 .pad-left { margin-left: 10px; }
11 .well div { color: #bbb; }
12 `]
13})
14export class EventThumbnailComponent
15{
16 @Input() event:any;
17}
1<div class="well hoverwell thumbnail">
2 <h2>{{event.name | uppercase}}</h2>
3 <div>Date: {{event.date | date}}</div>
4 <div>Time: {{event.time}}</div>
5 <div [ngSwitch]="event.time">
6 <span *ngSwitchCase="'8:00 am'">Early Start</span>
7 <span *ngSwitchCase="'10:00 am'">Late Start</span>
8 <span *ngSwitchDefault>Normal Start</span>
9 </div>
10 <div>Price: {{event.price | currency}}</div>
11 <div>
12 <span>Online URL: {{ event.onlineUrl }}</span>
13 </div>
14</div>
ng generate component events-list
1import { Component, OnInit } from '@angular/core';
2
3@Component({
4 selector: 'app-events-list',
5 templateUrl: './events-list.component.html'
6})
7export class EventsListComponent implements OnInit
8{
9 events = [
10 {
11 name:'Ng-Europe',
12 date:'09/10/2020',
13 time:'8:00 am',
14 price:'200',
15 onlineUrl:'https://www.pluralsight.com/angular/ng-europe'
16 },
17 {
18 name:'Angular Fundamentals',
19 date:'09/10/2020',
20 time:'8:00 am',
21 price:'200',
22 onlineUrl:'https://www.pluralsight.com/angular/ng-fundamentals'
23 },
24 {
25 name:'Ng-India',
26 date:'09/10/2020',
27 time:'9:00 am',
28 price:'2000',
29 onlineUrl:'https://www.pluralsight.com/angular/ng-india'
30 },
31 {
32 name:'Angular - Zero to Hero',
33 date:'09/10/2020',
34 time:'10:00 am',
35 price:'200',
36 onlineUrl:'https://www.pluralsight.com/angular/ng-europe'
37 }
38 ];
39 constructor(){
40
41 }
42
43 ngOnInit()
44 {
45
46 }
47}
1<div>
2 <h1>Upcoming Angular Events</h1>
3 <hr />
4 <div class="row">
5 <div class="col-md-5" *ngFor="let event of events">
6 <app-event-thumbnail [event]="event"></app-event-thumbnail>
7 </div>
8 </div>
9</div>
<app-events-list></app-events-list>
Run the following command in the command prompt to start and Angular development server in watch mode:
ng serve
N
key to not share it.http://localhost:4200
. You will see the events page.Now let's mimic a situation where we get null or undefined data.
In Visual Studio Code, open the file src > app > events-list > event-list.component.html and at line number 6, edit the event-thumbnail element so that it looks like this:
<app-event-thumbnail [event]=""></app-event-thumbnail>
1<div class="well hoverwell thumbnail">
2 <h2>{{event?.name | uppercase}}</h2>
3 <div>Date: {{event?.date | date}}</div>
4 <div>Time: {{event?.time}}</div>
5 <div [ngSwitch]="event?.time">
6 <span *ngSwitchCase="'8:00 am'">Early Start</span>
7 <span *ngSwitchCase="'10:00 am'">Late Start</span>
8 <span *ngSwitchDefault>Normal Start</span>
9 </div>
10 <div>Price: {{event?.price | currency}}</div>
11 <div>
12 <span>Online URL: {{ event?.onlineUrl }}</span>
13 </div>
14</div>
Congratulations!! You have handled null or undefined data using the safe navigation operator in Angular. For more information, please refer to Safe Navigation Operator in Angular.