title: Angular 5 animate combined with *ngFor
body: <p>I am attempting to animate a number of cards that are based on an array of items. The number is dynamic. I have put together some code that animates but it animates all of them. I cannot see how to animate each one individually.</p>
  
  <p>Here is my code so far:</p>
  
  <pre><code>import { Component, OnInit, trigger, state, style, transition, animate } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    template: `
        &lt;div *ngFor="let item of items" class="tp-box" (click)="toggleFlip()" [@flipState]="flip"&gt;
          &lt;div class="tp-box__side tp-box__front"&gt;{{item.item}} Front
          &lt;/div&gt;
          &lt;div class="tp-box__side tp-box__back"&gt;{{item.item}} Back
          &lt;/div&gt;
        &lt;/div&gt;
    `,
    styles: [
      `
      .tp-box {
        position: relative; width: 200px; height: 100px; margin: 3rem auto;
        transform-style: preserve-3d; transition: transform 1s;
      }
      .tp-box__side {
        width: 100%; height: 100%; position: absolute; backface-visibility: hidden;color: #fff;
        text-align: center; line-height: 100px; font-size: 24px; font-weight: 700; cursor: pointer; user-select: none;
      }
      .tp-box__front {
        background: #f30d36;
      }
      .tp-box__back {
        background: #23262d;
        transform: rotateY(179.9deg);
      }
  
      `
    ],
    animations: [
      trigger('flipState', [
        state('active', style({
          transform: 'rotateY(179.9deg)'
        })),
        state('inactive', style({
          transform: 'rotateY(0)'
        })),
        transition('active =&gt; inactive', animate('500ms ease-out')),
        transition('inactive =&gt; active', animate('500ms ease-in'))
      ])  
    ]
  })
  export class AppComponent {
  
    flip: string = 'inactive';
    constructor() {}
  
    items: any[] = [
      { "item": "Item 1"},
      { "item": "Item 2"},
      { "item": "Item 3"},
      { "item": "Item 4"},
      { "item": "Item 5"}
    ];
  
    toggleFlip() {
      this.flip = (this.flip == 'inactive') ? 'active' : 'inactive';
    }
  
  }
  </code></pre>
  
  <p>Clearly each time the user clicks on the box it sets the flip property from active to inactive and back again. The problem is that the property is not specific to one box and I am uncertain how to get the animation specific to one box.</p>
  
  <p>Here is a <a href="https://plnkr.co/edit/Ss2mSVvYO5esRZJnIz2q?p=preview" rel="nofollow noreferrer">plunkr</a></p>