Angular 4 Animation onload?

Question

So when a user visits an album page, I'd like for the album photo to slide to the right as the page is loading. How would I go about that ? Here is the animation:

  animations: [
    trigger('slide-in',[
      state('out', style({
        transform: 'translateX(-400px)',
        opacity: "0"
      })),
      state('in', style({
        transform: 'translateX(0px)',
      })),
      transition('out => in',
        animate('1000ms ease-in', keyframes([
          style({ opacity: 0, offset: 0}),
          style({ opacity: 0.5, offset: 0.5}),
          style({ opacity: 1, offset: 1}),
        ]))),
    ])
  ]

The HTML:

  <img [@slide-in]='state' src="{{albumToDisplay.albumCover}}" style="float: left;"/>

Then I have a variable to keep it's state:

state: string = 'out';

My solution that is failing is this (In the component.ts):

ngOnInit {
this.state = 'in';
}

score 4 · Answer 1 · answered Feb 14 '18 at 06:29

So, I figured it out.

I had to use the Angular LifeCycle Hook "AfterViewInit".

So in the code, I had to import "AfterViewInit", then implement it on the class.

export class ArtistPageComponent implements OnInit, AfterViewInit {


ngAfterViewInit() {
     this.state = (this.state === 'in' ? 'out' : 'in')
     this.cdRef.detectChanges();
     console.log('After View')
  }

The state changes from 'out' to 'in' after the view in the component has been initialized.

Album-Page View Initializes --> State Changes from 'out' --> 'in'

ALSO

I had to import 'ChangeDetectorRef' and inject in into the constructor. (not going to get too much into that here)

Angular 4 Animation onload?

1 Answers1