Angular 2/4 Animate Dynamic Component when loading

Question

I have an alert component which I am creating dynamically. I'd like to have a fade in / fade out animation when the alert is shown and hidden. At the moment when the alert is created it seems that the animation does not fire, however when the alert is closed the animation does fire.

After further investigation I realised that the alert is not fading in is due to the fact that the property tied with the animation trigger is being changed in the ngOnInit() function which is triggered before the view is in the DOM therefore the animation happens prior the component is on screen.

export class OverlayMessageComponent implements OnInit {

  ...

  ngOnInit() {
    if(this.autoShow) {
      this.show();
    }
  }

  ...

}

I know I can change the property in the ngAfterViewInit() function but this could result in an "Expression has changed after it was checked" exception as highlighted here.

I've tried to add an animation trigger using * => true and void => true, but this didn't solve the issue. I don't know if there's a way to trigger this animation and somehow still using ngOnInit().

Code Sample: https://plnkr.co/edit/8NvfhDvLVBd71I7DR0kW

score 0 · Answer 1 · answered Jul 19 '17 at 18:05

I ran into this same problem in angular 4.2.4. I was not able to get the animation to trigger even when using ngAfterViewInit(). I ended up adding a 1ms delay with an observable and that worked.

ngOnInit(){
    Observable.of(true).delay(1)
    .subscribe(() => { this.show() } )
}

Angular 2/4 Animate Dynamic Component when loading

1 Answers1