Trigger animation after page load in angular 8, ExpressionChangedAfterItHasBeenCheckedError - css

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:

Answer 1

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

Answer 2

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;
}

Answer 3

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

Answer 4

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 */)
}

Answer 5

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