typescript - Handling animations multiple objects in Angular 2+ -

working on angular app working quite lot of modals in wizard style configuration.

i'm using angular-cli make project.

here how i'm setting animations:

  animations:[     trigger('right-center-left',[       state('right', style({           transform: 'translatex(100%)'       })),       state('center', style({         transform: 'translatex(0)',       })),       state('left', style({         transform: 'translatex(-100%)',       })),       transition('right => center', animate('300ms ease-in')),       transition('center => left', animate('300ms ease-in')),     ]),   ], 

i have 5 divs have class of .modal transitioning through. there button calls nextmodal() , calls prevmodal(). i'm trying when nextmodal() called, current modal slides away, , next 1 slides in. reverse true of prevmodal() function on controller.

i've tested using type of call inside template:

<button class='right-btn' (click)='prevmodal(addressmodal,phonesmodal)'>previous</button> <button class='left-btn' (click)='nextmodal(phonesmodal, emailmodal)'>next part</button> 

and here modal change functions:

  nextmodal = (current, next) => {     current = 'left';     next = 'center';   }   prevmodal = (prev, current) => {     prev = 'center';     current = 'right';   } 

call template decorator on element

<li *ngfor="let hero of heroes"     [@right-center-left]="hero.state"     (click)="hero.togglestate()">   {{hero.name}} </li> 

p.s. think can error name, change on rightcenterleft or animation name, in example - slideanimation.