Checks for defined data in component

Let’s say I have config-items for my component. If they are available they should be in the output – otherwise not.

cfg = { name: "sam", address: "NY", age: 51 };
...
<p *ngIf="cfg.name != undefined">{{cfg.name}}</p>
<p *ngIf="cfg.address != undefined">{{cfg.address}}</p>
<p *ngIf="cfg.age != undefined">{{cfg.age}}</p>

The check for defined is pretty annoying if there are a lot of items.

Is there a way to do it better?

Answer

You can use the safe navigation operator (also known as optional chaining)

<p>{{cfg?.name}}</p>
<p>{{cfg?.address}}</p>
<p>{{cfg?.age}}</p>

Another option is to create a wrapping ng-container and apply the *ngIf on it.

<ng-container *ngIf="cfg">
  <p>{{cfg.name}}</p>
  <p>{{cfg.address}}</p>
  <p>{{cfg.age}}</p>
</ng-container>