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?
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>