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>

Share

You may like these posts

• 
  Why Does The Margin From An Inline-block Element Affect A Sibling Inline-block Element
• 
  Python:getting Text From Html Using Beautifulsoup
• 
  How To Show Input Field Error Message In Rails Input Field
• 
  How To Display Local Images Placed On Client Machine In Html Webpages