title: Angular 2 Change Detection Error: Expression has changed after it was checked. Previous value: 'over'. Current value: 'side'
body: <p>I am getting the following error just in Firefox. Not in Chrome or IE. </p>
  
  <blockquote>
    <p>"Error: Error in ./DefaultLayoutComponent class DefaultLayoutComponent - inline template:2:14 caused by: Expression has changed after it was checked. Previous value: 'over'. Current value: 'side'.”. </p>
  </blockquote>
  
  <p>This is a sidenav styling from material design that is throwing this. </p>
  
  <p>Here is line 2 of DefaultLayoutComponent html template :   </p>
  
  <pre><code>&lt;md-sidenav (mouseover)="toggleHover(true)" (mouseout)="toggleHover(false)" (close)="sidenavToggle(false)" (open)="sidenavToggle(true)" [mode]="(_navigation.mediumScreenAndDown &amp;&amp; sidenavStyle !== 'off') ? 'over':sidenavMode" [ngClass]="{'icon-sidenav': ((sidenavStyle === 'icon' || sidenavStyle === 'icon overlay') &amp;&amp; _navigation.largeScreen), 'over': (sidenavStyle === 'icon overlay')}"&gt;
  </code></pre>
  
  <p>Here is the method in the DefaultLayoutComponent typescript that gets called to determine sidenavStyle</p>
  
  <pre><code>  public get sidenavMode(): string {
        if(this.sidenavStyle === 'icon overlay' &amp;&amp; this.isHovering) {
            return 'over';
        } else if(this.sidenavStyle === 'icon' || this.sidenavStyle === 'icon overlay') {
           return 'side';
        } else if(this.sidenavStyle === 'hidden') {
           return 'over';
        } else if(this.sidenavStyle === 'off') {
           return 'over';
        }
        return this.sidenavStyle;
    }
  </code></pre>
  
  <p>I have determined that this is a change detection problem and I found this stackoverflow  <a href="https://stackoverflow.com/questions/41283293/angular-2-expression-has-changed-after-it-was-checked">Angular 2 - Expression has changed after it was checked</a> where Gunter makes a suggestion to use ngOnChanges and then detect those changes, but I am still throwing the error.</p>
  
  <pre><code>ngOnChanges() {
      this.sidenavMode; //method where I am determining sidenav style
      this.changeDetectorRef.detectChanges();
  }
  </code></pre>
  
  <p>I have tried this but I am still throwing the error. Any help greatly appreciated. </p>