Example of using BrowserAnimationsModule

templates/Microsoft.DotNet.Web.Spa.ProjectTemplates/angular/ClientApp/app/components/fetchdata/fetchdata.component.html

@@ -14,7 +14,7 @@
         </tr>
     </thead>
     <tbody>
-        <tr *ngFor="let forecast of forecasts">
+        <tr *ngFor="let forecast of forecasts" [@itemAnim]>
             <td>{{ forecast.dateFormatted }}</td>
             <td>{{ forecast.temperatureC }}</td>
             <td>{{ forecast.temperatureF }}</td>

templates/Microsoft.DotNet.Web.Spa.ProjectTemplates/angular/ClientApp/app/components/fetchdata/fetchdata.component.ts

@@ -1,9 +1,18 @@
 import { Component, Inject } from '@angular/core';
 import { Http } from '@angular/http';
+import { trigger, style, transition, animate } from '@angular/animations';
 
 @Component({
     selector: 'fetchdata',
-    templateUrl: './fetchdata.component.html'
+    templateUrl: './fetchdata.component.html',
+    animations: [
+        trigger('itemAnim', [
+            transition(':enter', [
+                style({ transform: 'translateX(-100%)' }),
+                animate(350)
+            ])
+        ])
+    ]
 })
 export class FetchDataComponent {
     public forecasts: WeatherForecast[];