Animation for newly rendered elements, but not on page load

Question

I\'m subscribed to a Firebase real-time database so that when I submit something to it, it immediately renders in the view without any need for jQuery or ajax.

I\'d

Answer 1

You can use the life cycle hook AfterViewInit to activate the animation after the initial view rendering has finished.

https://embed.plnkr.co/5l1kf5lMLEXSE8pNzqik/

@Component({
  selector: 'my-app',
  template: `
    

      {{item}}
    

    add
  `,
  animations: [
    trigger('greenFade', [
      transition('void => in', [style({background: 'rgb(173, 235, 173)'}), animate('5s ease-in')])
    ])
  ]
})
class App implements AfterViewInit {
  constructor(private cdRef: ChangeDetectorRef){}

  items: String = ['Item','Item','Item'];
  addItem(){
    this.items.push('Item');
  }

  animate: boolean;
  ngAfterViewInit(){
    this.animate = true;
    this.cdRef.detectChanges();
  }
}