title: Trigger animation every time array changes using Angular 4
body: <p><strong>Need to trigger animation every time the array changes</strong></p>
  
  <p>I am currently iterating over an array of products using *ngfor and everytime the length changes the animation will trigger. I am using Angular 4.</p>
  
  <pre><code>&lt;ul class="items col col-md-12" *ngIf="hasProducts()" [@productsIntro]="products.length"&gt;
  </code></pre>
  
  <p>The issue is that I need the animation to trigger everytime the array changes at all and not just the length of the array. Sometimes the array length will be the same but the items in the array are different so the animation will not trigger.</p>
  
  <p>I am not sure on how to pull this off and was hoping someone could help me out with a solution.</p>
  
  <pre><code>&lt;ul class="items col col-md-12" *ngIf="hasProducts()" [@productsIntro]="products.length"&gt;
      &lt;li class="col col-xs-12 col-sm-12 col-md-4" *ngFor="let product of products"&gt;
        &lt;div class="item"&gt;
          &lt;a href="" class="product-name"&gt;{{product.product_name}}&lt;/a&gt;
          &lt;div class="image-and-info col col-xs-8 col-sm-8 col-md-12"&gt;
            &lt;div class="product-thumb"&gt;
              &lt;img src="../../assets/img-filler.png" alt="{{product.product_name}}"&gt;
            &lt;/div&gt;
            &lt;div class="info"&gt;
              &lt;div class="sku"&gt;SKU: {{product.sku}}&lt;/div&gt;
              &lt;div class="price"&gt;Price: {{product.price | currency:'USD':true:'1.2-2'}}&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="product-col col col-xs-4 col-sm-4 col-md-12"&gt;
            &lt;div class="btn-group" role="group" aria-label="Basic example"&gt;
              &lt;button type="button" class="btn btn-solid" (click)="viewProduct(product)"&gt;View Product&lt;/button&gt;
              &lt;button type="button" class="btn btn-solid add-to-cart" (click)="addToCart($event)"&gt;Add to Cart&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>trigger form component:</p>
  
  <pre><code>trigger('productsIntro', [
    transition('* =&gt; *', [
      query(':enter', style({ opacity: 0 }), {optional: true}),
      query(':enter', stagger('100ms', [
        animate('1s ease-in', keyframes([
          style({opacity: 0, transform: 'translateY(-10%)', offset: 0}),
          style({opacity: .5, transform: 'translateY(10px)',  offset: 0.3}),
          style({opacity: 1, transform: 'translateY(0)',     offset: 1.0}),
        ]))]), {optional: true})
    ])
  ])
  </code></pre>