Usage of “?.” in Angular

Safe Navigation Operator

In some code snippets, you may have seen that Angular expressions have a question mark after them. Angular refers to it as ‘Safe Navigation Operator’.It makes sure that we are not seeing null and undefined values in our application when we want to access properties of an object.

“Safe Navigation Operator” can be used to prevent Angular from throwing errors, when trying to access object properties of an object that don’t exist.

E.g.       {{ employee?.name }}

Here it is, protecting against a view render failure if the employee is null. This will evaluate name only if an employee is not null or undefined. This comes in handy when an employee is something that is loaded asynchronously.

Consider a scenario where we have an object created in our component which is populated by data coming from HTTP Service.


Sample Code :

EmployeeRatingComponent.ts file

export class EmployeeRatingComponent implements OnInit {
  constructor(private http: HttpClient) { }
  
  employee;

  ngOnInit() {  
      this.http.get('http://my.api/employee/1').subscribe((response: any) =>
        this.employee = response);
  }
}

 


EmployeeRatingComponent.html file

<p>My employee rating is: {{ employee.rating }}</p>

This will yield a null reference error in the browser console.

TypeError: Cannot read property 'rating' of null in [null].

The issue is we are trying to access the property which does not have the response from Service/API as yet.

In two ways we can resolve this issue:

  1. using *ngIf directive or
  2. using ?. operator.

solution 1: Using *ngIf =>we can allow the part of our page renders only when EMPLOYEE is not null.

<div *ngIf="employee">
    <p>My employee rating is: {{ employee.rating }}</p>
</div>

It will work because angular will not render the content of div unless an employee is not null. Means once an employee is assigned with some value its safe to access its properties.


solution 2 : Using ?. (safe navigation operator) =>second way is to apply the question mark syntax on the property that we want to access.

<p>My employee rating is: {{ employee?.rating }}</p>

The employee?.rating is similar to ternary if statement.

employee !== null ? employee.rating : null

 

 #things to remember:

IT will work perfectly with long property paths such as employee?.address?.city?.state.

 


references:

https://angular.io/guide/template-syntax#!#safe-navigation-operator

https://www.concretepage.com/angular-2/angular-2-pipe-operator-and-safe-navigation-operator-example

https://github.com/angular/angular/issues/9850

knoldus-advt-sticker

Written by 

Neelam is a software consultant with experience of more than 6 months. She likes to keep up with the trending technologies. She is familiar with languages such as C, C++, Java, Scala, Angular 4 and is currently working on lagom with java. Her hobbies includes playing Table Tennis and listening music.

2 thoughts on “Usage of “?.” in Angular

  1. I can see that this is useful in some cases. However in the main this passes responsibility for object null checking to the view rather than the business logic. This makes the ts file dependant on the view, which is surely a weakness. You could add null checking to the business logic, but this would negate the need for this null checking in the view.

Leave a Reply

%d bloggers like this: