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=" != undefined">{{}}</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?


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


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

<ng-container *ngIf="cfg">

Source: stackoverflow