Animating one component in an array of components in Angular4 -

i new angular , trying animate flip on single component(card) in array of components in angular.

i have 10 cards in array, , want clicked card flip around. far have code when of cards clicked, flip around. clicked card flip.

here card component:

@component({   selector: 'app-card',   templateurl: './card.component.html',   styleurls: ['./card.component.scss'],   changedetection: changedetectionstrategy.onpush,   animations: [     trigger('flipstate', [       state('active', style({         transform: 'rotatey(179.9deg)'       })),       state('inactive', style({         transform: 'rotatey(0)'       })),       transition('active => inactive', animate('500ms ease-out')),       transition('inactive => active', animate('500ms ease-in'))     ])     ] }) export class cardcomponent {   @input() data: person[];    flip: string = 'inactive';    toggleflip() {     this.flip = (this.flip == 'inactive') ? 'active' : 'inactive';   } } 

here html:

 <div *ngfor="let p of data" (click)="toggleflip()" [@flipstate]="flip">     <div class="card__inner">       {{ p.name }}       <h3>{{ p.age }}</h3>       {{ p.jobtitle }}     </div>   </div> 

i thinking need identify clicked card , find way change flip "state" on card, i'm not sure how go this, or if best approach.

any appreciated!

thanks

turns out animation trigger needed added every list item.