Animate only new components - animation

Question

I am experimenting with the new animation API in Angular 2, and have the following challenge:
I have a parent component that displays a set of child components by using a *ngFor. The ngFor references a simple data array in the parent component.
Requirements:
When the parent component is rendered with its initial children, the parent and children should be rendered instantly (without animation)
When new child components are added (because of a new object appended to the data array), the new child should be animated (e.g. bounce in from the left).
How can I configure the animation to handle this?
The basic question is: How can a child component know if it is rendered as part of the initialization of its parent or later?
Some possible solutions:
- I can set a boolean variable directly on the data object that says that the new object is created after the view and should be animated. This property could be checked by the component. However, I don't want to introduce this kind of view logic in the data model.
- I can use the lifecycle hooks in the parent component to set a property in the parent that says that the parent is rendered and that all subsequent (new) children should be animated. However, I haven't been able to do this as it seems that all lifecycle hooks are executed before the children components are instantiated.
Other solutions?
Br
Anders

Answer 1

You can use a property in parent
initialLoad = true;
ngAfterViewInit() {
this.initialLoad = false;
}
https://github.com/angular/angular/issues/7239#issuecomment-227369239 contains an example (with Plunker):
#Component({
selector: 'app',
template: `
<button (click)="items.push(items.length)">Add</button>
<ul>
<template ngFor let-item [ngForOf]="items" let-i="index">
<li style="display: block;" #flyInOut="'in'" (click)="onClick(i)" *ngIf="!!item">{{ i }} - {{ item }}</li>
</template>
</ul>
`,
animations: [
trigger('flyInOut', [
state('in', style({ opacity: 1, transform: 'translateX(0) scaleY(1)' })),
transition('void => *', [
style({
opacity: 0,
transform: 'translateX(-100%)'
}),
animate('1s ease-in')
]),
transition('* => void', [
animate('1s 10 ease-out', style({
opacity: .5,
transform: 'scaleY(0.8)'
}))
])
])
]
})
export class App {
private items = [];
constructor() { }
onClick(index) {
//this.items.splice(index,1);
delete this.items[index];
}
}
There is currently an issue with *ngFor that was fixed in https://github.com/angular/angular/pull/10287 but the fix has yet to land.