Post display not found in Angular 2
I have searched and wondered if there is any directive to help display "No data" in table when the table is empty in angular 2. Or better yet, can I create this functionality in my services when I subscribe to the selected data?
<table>
<tbody>
<tr *ngFor="let game of Games">
</td>
<td>{{game.name}}</td>
<td>{{game.type}}</td>
</tr>
</tbody>
</table>
+6
user7345776
source
to share
5 answers
You can use the newest feature from Angular 4.0.0 and add the instruction if else
:
<div *ngIf="Games?.length;else no_data_templ">
<table>
<tbody>
<tr *ngFor="let game of Games">
<td>{{game.name}}</td>
<td>{{game.type}}</td>
</tr>
</tbody>
</table>
</div>
<ng-template #no_data_templ>
No daata found...
</ng-template>
Update : For Angular 2.X, you can use the following approach:
<div *ngIf="Games?.length">
<table>
<tbody>
<tr *ngFor="let game of Games">
<td>{{game.name}}</td>
<td>{{game.type}}</td>
</tr>
</tbody>
</table>
</div>
<div *ngIf="! Games?.length">
No data found...
</div>
+8
source to share
If you want to display a message stating that no data was found. Before the table tag, check if the Games have items to iterate over.
Something like that
public hasData(): boolean {
return (this.Games != null && this.Games.length > 0);
}
Use hasData () in template
<div *ngIf="!hasData()">No Data Found</div>
<table *ngIf="hasData()">
<tbody>
<tr *ngFor="let game of Games">
</td>
<td>{{game.name}}</td>
<td>{{game.type}}</td>
</tr>
</tbody>
</table>
You can structure and style this anyway.
+2
source to share
add these codes to your HTML file
.............. no entries found ..this code is for .ts file
isTableHasData = true;
applyFilter(filterValue: string) {
this.listData.filter = this.searchKey.trim().toLowerCase();
if(this.listData.filteredData.length > 0) {
this.isTableHasData = true;
} else {
this.isTableHasData = false;
}
}
0
source to share