CODEWITHSUNDEEP
angular
Sohail Mushtaq Awan
Sohail Mushtaq Awan

Reputation: 666

Why use "?" operator in template binding?

When I use ?, the binding works well. If I remove it, it doesn't show anything in the view.

<span class="subhead">{{project?.category}}</span>

Can you please tell me the difference? Is it a good practice to use it this way?

Upvotes: 64

Views: 62301

Answers (3)

Anand Raja
Anand Raja

Reputation: 3106

This safe navigation operator prevents the view from rendering before getting the value.

We can fix the error of undefined or null values in view templates by the following three methods. Obviously other ways are there.

Method 1: Using Safe navigation operator

<span class="subhead">{{project?.category}}</span>

Method 2: Using async pipe

<span class="subhead">{{(project | async )?.category}}</span>

If you are getting the value through @Input() decorator from app component, you can simplify the code like this in the app component

@Component({
  selector: 'my-app',
  template: `
    <div>
      <app-project [project]="project | async"></app-project>
    </div>
  `,
})
export class App { ... }

And you can use the template as below in the child component(i.e project component for example)

<span class="subhead">{{project.category}}</span>

Method 3: Restricting in the view by *ngIf structural directive

<span class="subhead" *ngIf="project">{{project.category}}</span>

Safe Navigation in angular

Async pipe

Upvotes: 4

eko
eko

Reputation: 40647

? is the safe navigation operator. It checks whether the variable is null or undefined so that our template won't try to select a property of something falsy.

More info: https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths

Upvotes: 36

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657721

When Angular renders the view before project got a value assigned, it causes an exception. ?. stops evaluating when project is null or undefined, which usually happens when data is fetched async, for example from the server which can take quite some time.

The next time change detection recognizes a change, the bindings will be re-evaluated. When project then has a value it will bind project.category.

Upvotes: 79

Related Questions