Ng If does not work in observable variable in Angular 6

Question

I have integrated the Angular6 material data grid with server side pagination as per this link https://blog.angular-university.io/angular-material-data-table/

Here, I want to display the "No Data Found", if the data set is empty from the response. I could take the totalCount which is mapped Observable and I can print the view as below. But, ngIf does not work.

  private totalCountSubject = new BehaviorSubject([]);
  public totalCount$ = this.totalCountSubject.asObservable();
  this.totalCountSubject.next([body.data.count]);

  // View
  {{dataSource.totalCount$}} <!-- It displayes 0 or count of the row -->

   <!-- It does not work. --->
   <span *ngIf="(dataSource.totalCount$ | async) === 0 ">
     NO DATA FOUND!!!!
   </span>

Any idea why ngIf does not work in this case.

I played with a similar implementation but found it worked https://stackblitz.com/edit/angular-kfpxfg, and you can change value in HelloComponent's ngOnInit() { this.subject.next(0); } to see it worked — ABOS, Dec 13 '18 at 14:50

Sachila Ranawaka · Accepted Answer · 2018-12-13T14:50:15.143

1

handle the condition with nested ngIf s

<ng-container *ngIf="dataSource.totalCount$ | async as totalCount">  
   <span *ngIf="totalCount == 0 ">
     NO DATA FOUND!!!!
   </span>

<ng-container>

edited Dec 13 '18 at 14:50

answered Dec 13 '18 at 14:33

Sachila Ranawaka

39,756
7
56
80

use `==` instead of `===` https://stackblitz.com/edit/angular-jdvr6w?file=src%2Fapp%2Fapp.component.html – Sachila Ranawaka Dec 13 '18 at 14:50
It works good. Thank you. Can you answer this question also if you can. https://stackoverflow.com/questions/53658637/nested-list-populated-in-angular-6-material-data-table – Muthukumar Marichamy Dec 13 '18 at 14:55

Ng If does not work in observable variable in Angular 6

1 Answers1