Usage of “?.” in Angular

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