I'm trying to create animation on toast message in/out with ngFor.
When new toasts come, the animation is ok, but if I click to close one of them, all toast messages are removed from the DOM, but are still in the model and when new Toasts come, they are not showing up in the DOM.
In the view i have:
<div *ngFor="let message of messages; let idx = index;" class="toast"
@flyInOut="'in'"
(click)="closeToast($event, idx)">
<div class="text {{message.type}}">{{message.text}}</div>
</div>
And this is the animation definition in the component:
animations: [
trigger('flyInOut', [
state('in', style({transform: 'translateX(0)'})),
transition('void => in', [
style({transform: 'translateX(-100%)'}),
animate(1000)
]),
transition('in => void', [
animate(1000, style({transform: 'translateX(100%)'}))
])
])
]
How can I wire the trigger animation with the model? (using ng2 - rc3)
