Safe Traversal Operator

Default

TS

export class AppComponent {
    task = {
      title: 'Review applications',
      assignee: {
        name: 'John Smith'
      }
    }
}

HTML

<p>{{task.assignee.name}}</p>

Prevent error with ngIf

If the value of the property is null use the ngIf directive to prevent error messages:

export class AppComponent {
    task = {
      title: 'Review applications',
      assignee: null
    }
}

<p *ngIf="task.assignee">{{task.assignee.name}}</p>

Safe Traversal Operator

The assignee can be null or undefined, we put a question mark after it before the dot:

<p>{{task.assignee?.name}}</p>