0

Say I had an ngFor loop surrounding an ngIf statement

<ng-container *ngFor="let item of items">
  <ng-container *ngIf="condition1">
    //display table1
  </ng-container>
</ng-container>

Now, say I had a second table (call it table2) that I want to display if table1 is not displayed.

<ng-container *ngIf="condition1 was never met and table1 is not displayed">
  //display table2
<ng-container>

What is the best way to do this, and is there a way to do this using Angular's data binding features? Or, could you point me in the right direction?

cluis92
  • 664
  • 12
  • 35
  • Does this answer your question? [Angular | Display element conditionally](https://stackoverflow.com/questions/47231336/angular-display-element-conditionally) – Ray Jul 16 '21 at 01:30

2 Answers2

0

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

Leandro Matilla
  • 911
  • 4
  • 14
0

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>
Tammy
  • 1
  • 1