title: Angular 8 add class after page load Error: ExpressionChangedAfterItHasBeenCheckedError
body: <p>As the title suggests, I am trying to add a class to a <code>div</code> element after the page is load! I have a condition <code>isTrue</code>, and the angular function <code>ngAfterViewInit()</code> that executes after the page is loaded making <code>isTrue</code> value to be <code>true</code>, then adding the class <code>hideOnLoad</code>. Of course I could use standard <code>javascript</code> or <code>jquery</code>, but I must do it the angular way. Essentially the end result should be that, the <code>div.index-logo-wrapper</code> fades out slowly after the page is laod. My idea was to add a class once its loaded that gradually decreases the <code>opacity</code> You input is much appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-index-section',
    templateUrl: './index-section.component.html',
    styleUrls: ['./index-section.component.scss']
  })
  export class IndexSectionComponent implements OnInit {
    isTrue: boolean = false;
    public innerWidth: any;
    constructor() { }
  
    ngOnInit() {
    }
  
    ngAfterViewInit() {
      this.innerWidth = window.innerWidth;
      if (this.innerWidth &lt; 1000) {
        this.isTrue = true;
        alert(this.isTrue);
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="index-section"&gt;
    &lt;div class="index-logo-wrapper" [class.hideOnLoad]="isTrue"&gt;
      &lt;figure&gt;
        &lt;img src="assets/icons/logo_mobile.svg" alt=" logo"&gt;
      &lt;/figure&gt;
    &lt;/div&gt;
    &lt;div class="index-media-wrapper"&gt;
      &lt;div class="media-container"&gt;
        &lt;iframe src="https://player.vimeo.com/video/128014070?autoplay=1&amp;color=ffffff&amp;title=0&amp;byline=0&amp;portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen&gt;&lt;/iframe&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque contra est, ac dicitis; Duo Reges: constructio interrete. Videsne quam sit magna dissensio?
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the error in my console: </p>
  
  <p><a href="https://i.stack.imgur.com/15tAy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/15tAy.png" alt="enter image description here"></a></p>