Clarity on Safe Navigation Operator in Angular

Issue

Angular Docs says:

Sometimes however, null values in the property path may be OK under certain circumstances, especially when the value starts out null but the data arrives eventually.

With the safe navigation operator, ?, Angular stops evaluating the expression when it hits the first null value and renders the view without errors.

I'm finding little ambiguity over here. Does it says that using Safe Navigation Operator will not render(update) data which was null at first but eventually got changed say because of AJAX call updated that object after some time?

Solution

Does it says that using Safe Navigation Operator will not render(update) data which was null at first but eventually got changed say because of AJAX call updated that object after some time?

No. It means that the expression is not evaluated after it detects some null value (but won't stop from rendering if it changes in the future to some non-null value).

For example if in component.ts you have

val = null;
// ...
someService.someMethod().susbcribe(val => this.val);

and in the component.html you have

{{val?.someProperty}}

Initially nothing will be rendered because val is null.

Now, once some value arrives inside the susbcribe and this.val gets some non-null value, the value of val.someProperty is rendered in the view.

See a demo using a timeout.

Answered By - lealceldeiro