Skip to content Skip to sidebar Skip to footer

How To Display A Certain HTML If A Condition Is Never Met (Angular)

Say I had an ngFor loop surrounding an ngIf statement //display table1

Solution 1:

You can use standard Angular ngIf, Else like this 👇

<ng-container
  *ngIf="condition1; then table1; else table2">
</ng-container>

<ng-template #table1>
  <div>
    table1
  </div>
</ng-template>
<ng-template #table2>
  <div>
    table2
  </div>
</ng-template>

You can read more about it on this post


Solution 2:

You can use the ng-template and ngIf-else

<ng-container *ngFor="let item of items">
  <ng-container *ngIf="condition1;else table2">
    //display table1
  </ng-container>
</ng-container>
<ng-template #table2> //display table2 </ng-template>

or

<ng-container *ngFor="let item of items">
  <ng-container *ngIf="condition1;then table1 else table2"> </ng-container>
</ng-container>
<ng-template #table1> //display table1 </ng-template>
<ng-template #table2> //display table2 </ng-template>

Post a Comment for "How To Display A Certain HTML If A Condition Is Never Met (Angular)"