title: Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value:
body: <p>How to avoid getting this console error.</p>
  
  <p>ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'bg-fade: false'. Current value: 'bg-fade: true'.</p>
  
  <p>I am trying to add a class to the mat-sidenav-container based on the truth value, whenever the value changes am getting the mentioned error.</p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;mat-sidenav-container [ngClass]="{'bg-fade': showSpinner}"&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>showSpinner: boolean;
  
  constructor(private httpStatus: HTTPStatus) {
      this.httpStatus.getHttpStatus()
        .subscribe((status: boolean) =&gt; {
          this.showSpinner = status;
        });
    }
  </code></pre>
  
  <p>styles.css</p>
  
  <pre><code>.bg-fade {
      opacity: 0.3 !important;
      pointer-events: none !important;
  }
  </code></pre>