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?

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.

? 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

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