title: Trigger animation after page load in angular 8, ExpressionChangedAfterItHasBeenCheckedError
body: <p>As the question suggests, I am trying to figure out a way to get an element animated after the page has been loaded. I have looked all over the place but there seem to be too many and no way to do this at the same time, I am hoping for some guidance. After the page is loaded in mobile the the logo should slowly animate towards the top-right and also scale down in size, if that makes sense. </p>
  
  <p>I am looking for the Angular equivalent of <code>$(document).ready(function() {}</code></p>
  
  <p>As per suggestions, I have used <code>ngAfterViewInit()</code> but I still cannot get anything to work.</p>
  
  <p>Below the <code>index-section.component.html</code></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-html lang-html prettyprint-override"><code>&lt;section class="index-section"&gt;
    &lt;div [@logoMoveResize]="load_completed ? 'initial' : 'end'" class="index-logo-wrapper" [class.hideOnLoad]="isTrue"&gt;
      &lt;figure&gt;
        &lt;img src="assets/icons/logo_mobile.svg" alt="urbanwheels 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;/div&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;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And the <code>index-section.component.ts</code></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, Inject, ViewChild } from '@angular/core';
  import { trigger, state, animate, style, group, query, transition } from '@angular/animations';
  
  @Component({
    selector: 'app-index-section',
    templateUrl: './index-section.component.html',
    styleUrls: ['./index-section.component.scss'],
    animations: [
      trigger('logoMoveResize', [
        state('initial', style({
          transform: 'translateX(0%) translateY(0%) scale(1)',
        })),
        state('end', style({
          transform: 'translateX(25%) translateY(-25%) scale(.3)',
        })),
        transition('initial &lt;=&gt; end', [animate('1s')]),
      ])
    ]
  })
  export class IndexSectionComponent implements OnInit {
  
    load_completed = true;
    innerWidth: any;
  
    ngOnInit() {
      this.innerWidth = window.innerWidth;
    }
  
    ngAfterViewInit() {
      if ( this.innerWidth &lt; 1000 ) {
       this.load_completed = false;
      }
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>This the error I am getting: </p>
  
  <p><a href="https://i.stack.imgur.com/DjtjA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DjtjA.png" alt="enter image description here"></a></p>