Angular 2 animation trigger for ngFor (state "in") -


i'm trying create animation on toast message in/out ngfor.

when new toasts come, animation ok, if click close 1 of them, toast messages removed dom, still in model , when new toasts come, not showing in dom.

in view 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 animation definition in 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 wire trigger animation model? (using ng2 - rc3)


Comments