Begrip: *ngIf directive

Het *ngIf directive kan gebruikt worden om voorwaardelijk te renderen. Dit directive wordt als attribuut meegegeven aan een component of HTML-element.

De syntax is als volgt:

<component *ngIf="boolean expression">...</component>

Else tak

In de plaats van verschillende *ngIf directives na elkaar te gebruiken, is het ook mogelijk om een else tak toe te voegen. Hiervoor moet de code die in de else tak getoond moet worden, omringt worden door een <ng-template> component. De component krijgt vervolgens een naam (notCompleted in onderstaand voorbeeld). We kunnen deze naam tenslotte gebruiken in het *ngIf directive.

/src/app/home/home.page.html

<ion-icon *ngIf='task.done; else notCompleted' 
          name='checkmark-circle'
          (click)='toggleTaskStatus(task.id)'></ion-icon>

<ng-template #notCompleted>
  <ion-icon name="ellipse-outline"
            (click)='toggleTaskStatus(task.id)'></ion-icon>
</ng-template>

:::