title: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'
body: <p>I have an Angular 10 application, I am trying to remove the navside component from the login component, so I created a service on the nave side component contains this code :</p>
  <pre class="lang-js prettyprint-override"><code>visible: boolean;
  
    constructor() {
      this.visible = true;
  
    }
    show() {
      this.visible = true;
  
    }
    hide() {
      this.visible = false;
    }
    toggle() {
      this.visible = !this.visible;
    }
    doSomethingElseUseful() { }
  </code></pre>
  <p>and inside the naveside component i put :</p>
  <pre class="lang-js prettyprint-override"><code>export class NavsideComponent implements OnInit {
  
  
    constructor(public sr: ServService ) { }
  
    ngOnInit(): void {
      
    }
  </code></pre>
  <p>and the Html component :</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngIf=&quot;sr.visible&quot;&gt;
      &lt;mat-sidenav-container class=&quot;example-container&quot;&gt;
          &lt;mat-sidenav #sidenav mode=&quot;push&quot; class=&quot;app-sidenav&quot; opened&gt;
              &lt;mat-toolbar class=&quot;co&quot;&gt;
                  &lt;span class=&quot;toolbar-filler&quot;&gt;&lt;/span&gt;
  
  .
  .
  .
  .
  .
  . &lt;/div&gt;
  </code></pre>
  <p>but this error was displayed :</p>
  <pre><code>ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'.
  </code></pre>
  <p><strong>EDIT 1</strong></p>
  <p>Login.component.ts</p>
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { ServService } from '../../navside/serv.service';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
    constructor( private sr :ServService) { }
  
    ngOnInit(): void {
      this.sr.hide();
      this.sr.doSomethingElseUseful();
    }
  
  }
  </code></pre>
  <p><strong>EDIT 2</strong></p>
  <p>Stackblitz putting together the snippets above, where the warning can be seen:</p>
  <p><a href="https://stackblitz.com/edit/angular-ivy-vbkytu?file=src/app/login/login.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-vbkytu?file=src/app/login/login.component.ts</a></p>