Ggtcf

In my Angular 6 application. I have a table showing data from a web api, also I have some ngIf containers. One shows a message if the web api data is empty. The other one should show the table if there is data coming back in. My current code does not work:

.ts file

 public errorApi = false;
 public tableShow = false;

ngOnInit() 
 this.service.getIncidents(this.customer_id).subscribe((data) => data.result.length === 0;
 this.tableShow = this.data && this.data.result;
 ) 
 
}

html

<ng-container *ngIf="errorApi">
 <div class="column col-12 text-center pt-10 pb-10">
 <div class="empty">
 <div class="empty-icon">
 <i class="icon icon-people"></i>
 </div>
 <p class="empty-title h5">There are no incidents to display</p>
 <div class="empty-action">
 <button class="btn btn-primary">Create an incident</button>
 </div>
 </div>
 </div>
 </ng-container>

<ng-container *ngIf="tableshow">
 <table></table>
 </ng-container>

Use the data variable directly to check if it has data or not.

This checks if you have data in the data array. If it has, it will display the table but if it's empty array or null then it will display the error.

Define your data variable in the ts first:
data = [];

<div *ngIf="!data.length > 0">
 <div class="column col-12 text-center pt-10 pb-10">
 <div class="empty">
 <div class="empty-icon">
 <i class="icon icon-people"></i>
 </div>
 <p class="empty-title h5">There are no incidents to display</p>
 <div class="empty-action">
 <button class="btn btn-primary">Create an incident</button>
 </div>
 </div>
 </div>
</div>

<div *ngIf="data.length > 0">
 <p>Table Data here</p>
</div>

Try else in ngIf statement

<ng-container *ngIf="errorApi else apiTable">
 <div class="column col-12 text-center pt-10 pb-10">
 <div class="empty">
 <div class="empty-icon">
 <i class="icon icon-people"></i>
 </div>
 <p class="empty-title h5">There are no incidents to display</p>
 <div class="empty-action">
 <button class="btn btn-primary">Create an incident</button>
 </div>
 </div>
 </div>
 </ng-container>

<ng-container #apiTable>
 <table></table>
 </ng-container>

Try else from *ngIf directive:

*ngIf="errorApi; else apiTable"

public data: any;
public loading: boolean;

private subscription: Subscription;

ngOnInit() 
 this.loading = true;
 this.subscription = this.service.getIncidents(this.customer_id)
 .subscribe((data: any) => 
 this.loading = false;

 // Because you have no error logic in your service
 If (data.result //&& any other validation on the data: ) 
 this.data = data.result;

 console.log('Result - ', data);
 console.log('data is received');
 else 
 this.errorApi = true;
 
 );


ngOnDestroy(): void 
 this.subscription.unsubscribe();

And in your html you can use ng-template:

<ng-template *ngIf="data && !loading; else errorTemplate">...</ng-template>
<ng-template #errorTemplate>...</ng-template>

Obviously, accommodate for your validation on the data: but this should provide you some ideas.