Trigger animation after page load in angular 8, ExpressionChangedAfterItHasBeenCheckedError

Question

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.

I am looking for the Angular equivalent of $(document).ready(function() {}

As per suggestions, I have used ngAfterViewInit() but I still cannot get anything to work.

Below the index-section.component.html

<section class="index-section">
  <div [@logoMoveResize]="load_completed ? 'initial' : 'end'" class="index-logo-wrapper" [class.hideOnLoad]="isTrue">
    <figure>
      <img src="assets/icons/logo_mobile.svg" alt="urbanwheels logo">
    </figure>
  </div>
  <div class="index-media-wrapper">
    <div class="media-container">
      <iframe src="https://player.vimeo.com/video/128014070?autoplay=1&color=ffffff&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque contra est, ac dicitis; Duo Reges: constructio interrete. Videsne quam sit magna dissensio?
    </p>
  </div>
</section>

And the index-section.component.ts

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 <=> end', [animate('1s')]),
    ])
  ]
})
export class IndexSectionComponent implements OnInit {

  load_completed = true;
  innerWidth: any;

  ngOnInit() {
    this.innerWidth = window.innerWidth;
  }

  ngAfterViewInit() {
    if ( this.innerWidth < 1000 ) {
     this.load_completed = false;
    }
  }
}

This the error I am getting:

have you tried triggering an animation in ngAfterViewInit lifecycle hook — rdRahul, Nov 22 '19 at 12:33

Joel Joseph · Answer 1 · 2019-11-22T12:57:34.450

6

set a variable in component.ts

@Component({
  selector: 'app-some',
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.scss'],
  animations: [
    trigger('fadeInOut', [
      state('void', style({
        opacity: 0
      })),
      transition('void <=> *', animate(1000)),
    ]),
    trigger('EnterLeave', [
      state('flyIn', style({ transform: 'translateX(0)' })),
      transition(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('0.5s 300ms ease-in')
      ]),
      transition(':leave', [
        animate('0.3s ease-out', style({ transform: 'translateX(100%)' }))
      ])
    ])
  ]
})

export class SomeComponent implements OnInit {

    load_completed = false;

    ngOnInit(){
    }

    ngAfterViewInit(){
      load_completed = true;
    }

}

And in you component.html

<div [@fadeInOut]="load_completed"> some random element you want to animate  </div>

As above example you can just animate when you need based on the condtion

edited Nov 22 '19 at 12:57

answered Nov 22 '19 at 12:50

Joel Joseph

5,889
4
31
36

@kontenurban please check the above answer – Joel Joseph Nov 22 '19 at 13:03
Essentially it works and I get the desired result but I am getting at this error in the console: `"ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '@EnterLeave: false'. Current value: '@EnterLeave: true'."` – felixo Nov 22 '19 at 13:52
Also, it seems it animates regardless of weather `load_completed` is true or false! – felixo Nov 22 '19 at 14:07

felixo · Accepted Answer · 2019-11-29T07:44:03.737

This answer has provided me with info I need in regards to the question. As @Kevin LeStarge suggested my work around was:

setTimeout(()=> {
    this.load_completed = true;
}, 0);

Or as @Lijo suggests using the AfterContentChecked life cycle hook:

import { ChangeDetectorRef, AfterContentChecked} from '@angular/core';

  constructor(
  private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {
   this.cdref.detectChanges();
   this.load_completed = true;
 }

score 1 · Answer 3 · answered Nov 22 '19 at 12:33

1

use ngAfterViewInit hook of angular to apply animation to the element.

answered Nov 22 '19 at 12:33

satyam soni

259
1
9

score 1 · Answer 4 · answered Dec 02 '19 at 17:49

I am looking for the Angular equivalent of $(document).ready(function() {}

the equivalent is

constructor(private zone: NgZone) {
  this.zone.onStable.pipe(
    // don't keep the stream open
    first()
  ).subscribe(() => /* zone is stable, do something */)
}

score 0 · Answer 5 · answered Nov 22 '19 at 12:54

0

You can use Angular Resolve - Interface that classes can implement to be a data provider. A data provider class can be used with the router to resolve data during navigation. The interface defines a resolve() method that will be invoked when the navigation starts. The router will then wait for the data to be resolved before the route is finally activated.

For more details - https://angular.io/api/router/Resolve

answered Nov 22 '19 at 12:54

Amit Sharma

668
1
6
14

your answer is out of context – Joel Joseph Nov 22 '19 at 13:01

Trigger animation after page load in angular 8, ExpressionChangedAfterItHasBeenCheckedError

5 Answers5