title: ExpressionChangedAfterItHasBeenCheckedError in mat-table when there is *ngIf in column
body: <p>I am getting ExpressionChangedAfterItHasBeenCheckedError when using mat-table filter and one of my column using </p>
  
  <pre><code>&lt;mat-icon *ngIf="parseString(element.blacklisted)" matTooltip="{{'black_listed'|translate}}" class="warning"&gt;thumb_down&lt;/mat-icon&gt;
  </code></pre>
  
  <p>I am using Angular 7 and custom responsive style. I found if I remove this *ngIf code, the responsive style still give me same error with this line of code </p>
  
  <pre><code>&lt;span class="mobile-label"&gt;{{'name_label'|translate}}:&lt;/span&gt;
  </code></pre>
  
  <p>the error message is like this:</p>
  
  <pre><code>ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'. Current value: 'ngIf: false'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?
      at viewDebugError (core.js:16657)
      at expressionChangedAfterItHasBeenCheckedError (core.js:16645)
      at checkBindingNoChanges (core.js:16747)
      at checkNoChangesNodeInline (core.js:19618)
      at checkNoChangesNode (core.js:19607)
      at debugCheckNoChangesNode (core.js:20211)
      at debugCheckDirectivesFn (core.js:20139)
      at Object.eval [as updateDirectives] (LoanReportComponent.html:37)
      at Object.debugUpdateDirectives [as updateDirectives] (core.js:20128)
      at checkNoChangesView (core.js:19506)
  </code></pre>
  
  <p>here is my html code</p>
  
  <pre><code>&lt;div&gt;
        &lt;app-alert&gt;&lt;/app-alert&gt;
        &lt;br /&gt;
        &lt;app-loader&gt;&lt;/app-loader&gt;
  
        &lt;mat-form-field class="prefix-indent"&gt;
          &lt;mat-icon matPrefix&gt;search&lt;/mat-icon&gt;
          &lt;input matInput class="form-control search-box" (keyup)="updateFilter($event.target.value)" placeholder="{{'filter_label'|translate}}"&gt;
  
        &lt;/mat-form-field&gt;
        &lt;!-- Report list --&gt;
        &lt;div *ngIf="transaction_list.length&gt;0"&gt;
          &lt;mat-table mat-table #transaction [dataSource]="ds_transaction" matSort&gt;
            &lt;ng-container matColumnDef="name"&gt;
              &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; {{'name_label'|translate}} &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;
                &lt;span class="mobile-label"&gt;{{'name_label'|translate}}:&lt;/span&gt;
                {{element.customer_full_name}}&lt;mat-icon *ngIf="parseString(element.blacklisted)" matTooltip="{{'black_listed'|translate}}" class="warning"&gt;thumb_down&lt;/mat-icon&gt;
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt;
  
            &lt;ng-container matColumnDef="transaction_dt"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; {{'transaction_date'|translate}} &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;
                &lt;span class="mobile-label"&gt;{{'transaction_date'|translate}}:&lt;/span&gt;
                {{element.transaction_dt}}
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt;
            &lt;ng-container matColumnDef="application_fee"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; {{'application_fee'|translate}} &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;
                &lt;span class="mobile-label"&gt;{{'application_fee'|translate}}:&lt;/span&gt;
                {{element.application_fee}}
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt;
            &lt;ng-container matColumnDef="principal"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; {{'principal_label'|translate}} &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;
                &lt;span class="mobile-label"&gt;{{'principal_label'|translate}}:&lt;/span&gt;
                {{element.principal}}
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt;
  
            &lt;ng-container matColumnDef="currency_code"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; {{'currency_code'|translate}} &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;
                &lt;span class="mobile-label"&gt;{{'currency_code'|translate}}:&lt;/span&gt;
                {{element.currency_code}}
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt;
  
            &lt;ng-container matColumnDef="total_interest_paid"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; {{'total_interest_paid'|translate}} &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;
                &lt;span class="mobile-label"&gt;{{'total_interest_paid'|translate}}:&lt;/span&gt;
                {{element.total_interest_paid}}
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt;
  
            &lt;ng-container matColumnDef="total_late_fee_paid"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; {{'total_late_fee_paid'|translate}} &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;
                &lt;span class="mobile-label"&gt;{{'total_late_fee_paid'|translate}}:&lt;/span&gt;
                {{element.total_late_fee_paid}}
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt;
  
            &lt;ng-container matColumnDef="principal_paid"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; {{'principal_paid'|translate}} &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;
                &lt;span class="mobile-label"&gt;{{'principal_paid'|translate}}:&lt;/span&gt;
                {{element.principal_paid}}
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt;
  
            &lt;ng-container matColumnDef="total_balance_paid"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; {{'total_balance_paid'|translate}} &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;
                &lt;span class="mobile-label"&gt;{{'total_balance_paid'|translate}}:&lt;/span&gt;
                {{element.total_balance_paid}}
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt;
  
            &lt;ng-container matColumnDef="interest_rate"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; {{'interest_rate'|translate}} &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;
                &lt;span class="mobile-label"&gt;{{'interest_rate'|translate}}:&lt;/span&gt;
                {{element.interest_rate}}
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt;
  
            &lt;ng-container matColumnDef="cashed_out"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; {{'paid_off'|translate}} &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;
                &lt;span class="mobile-label"&gt;{{'paid_off'|translate}}:&lt;/span&gt;
                {{element.cashed_out}}
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt;
  
            &lt;ng-container matColumnDef="status"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; {{'status_label'|translate}} &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;
                &lt;span class="mobile-label"&gt;{{'status_label'|translate}}:&lt;/span&gt;
                {{getStatus(element.approval_status)}}
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt;
  
            &lt;ng-container matColumnDef="action"&gt;
              &lt;mat-header-cell *matHeaderCellDef&gt; &lt;/mat-header-cell&gt;
              &lt;mat-cell *matCellDef="let element"&gt;
                &lt;button mat-raised-button (click)="lookDetail(element)" matTooltip="{{'view_detail'|translate}}" *ngIf="isAdmin"&gt;
                  &lt;mat-icon&gt;
                    more_horiz
                  &lt;/mat-icon&gt;
                &lt;/button&gt;&amp;nbsp;
                &lt;button mat-raised-button (click)="editLoan(element)" matTooltip="{{'edit_label'|translate}}" *ngIf="isAdmin"&gt;
                  &lt;mat-icon&gt;
                    edit
                  &lt;/mat-icon&gt;
                &lt;/button&gt;&amp;nbsp;
              &lt;/mat-cell&gt;
            &lt;/ng-container&gt;
  
            &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
            &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
  
  
          &lt;/mat-table&gt;
          &lt;mat-paginator #paginator [length]="ds_transaction.length"
                         [pageSize]="10"
                         [pageSizeOptions]="[ 10, 20, 50, 100]"
                         [showFirstLastButtons]="true"&gt;
          &lt;/mat-paginator&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>and here are some of my ts code</p>
  
  <pre><code>@ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;
    this.setDataSourceAttributes();
  }
  
  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.setDataSourceAttributes();
  }
  
  setDataSourceAttributes() {
    this.ds_transaction.paginator = this.paginator;
    this.ds_transaction.sort = this.sort;
  
    if (this.paginator &amp;&amp; this.sort) {
      this.updateFilter('');
    }
  }
  
  ngOnInit() {
      this._userService.currentUser.takeUntil(this.ngUnsubscribe).subscribe(user =&gt; {
        if (!user) {
          this.router.navigate(['/logout']);
        } else {
          this.isAdmin = user.isAdmin;
          this.isEmployee = user.isEmployee;
          if (this.type == 'daily') {
            this.startDate = new Date();
            this.getReport();
          }
          this.translate.get('pending_label').takeUntil(this.ngUnsubscribe).subscribe(value =&gt; {
  
            this.pending_label = value;
            this.approved_label = this.translate.instant('approved_label');
            this.denied_label = this.translate.instant('denied_label');
          });
        }
      });
  }
  
  updateFilter(filterValue: string) {
  
      this.ds_transaction.filter = filterValue.trim().toLowerCase();
  
  
  
    if (this.ds_transaction.paginator) {
      this.ds_transaction.paginator.firstPage();
    }
  }
  
  getReport(): void {
    let sDate: string = '';
    let eDate: string = '';
    let reportName: string = '';
    if (this.type == 'daily') {
      sDate = this.datepipe.transform(this.startDate, 'yyyy-MM-dd');
      eDate = this.datepipe.transform(this.startDate, 'yyyy-MM-dd');
      reportName = 'REPORT_DAILY_ACTIVE_LOAN_TRANSACTIONS';
    } else {
      sDate = this.datepipe.transform(this.startDate, 'yyyy-MM-dd');
      eDate = this.datepipe.transform(this.endDate, 'yyyy-MM-dd');
      reportName = 'REPORT_DATE_RANGE_ACTIVE_LOAN_TRANSACTIONS';
    }
    this._backendService.getLoanReport(this._userService.getToken(), sDate, eDate, reportName)
      .takeUntil(this.ngUnsubscribe)
      .subscribe(response =&gt; {
        this.transaction_list = response.loan_transactions;
        console.log(this.transaction_list);
        if (this.transaction_list &amp;&amp; this.transaction_list.length &gt; 0 &amp;&amp; this.transaction_list[0].transaction_id &gt; 0) {
          this.ds_transaction = new MatTableDataSource&lt;any&gt;(this.transaction_list);
        } else {
          this.ds_transaction = new MatTableDataSource&lt;any&gt;();
  
        }
      }, (error: any) =&gt; {
        let msg = error.message ? error.message : error;
        this.alertService.error(msg);
        this._errService.handleError(error);
        this._loader.display(false);
      }, () =&gt; {
        this._loader.display(false);
      });
  }
  </code></pre>
  
  <p>thank you very much for your help.</p>