Example of using BrowserAnimationsModule

templates/Microsoft.DotNet.Web.Spa.ProjectTemplates/angular/ClientApp/app/app.module.browser.ts

@@ -2,12 +2,14 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppModuleShared } from './app.module.shared';
 import { AppComponent } from './components/app/app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
     bootstrap: [ AppComponent ],
     imports: [
         BrowserModule,
-        AppModuleShared
+        AppModuleShared,
+        BrowserAnimationsModule
     ],
     providers: [
         { provide: 'BASE_URL', useFactory: getBaseUrl }

templates/Microsoft.DotNet.Web.Spa.ProjectTemplates/angular/ClientApp/app/app.module.server.ts

@@ -2,12 +2,14 @@ import { NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
 import { AppModuleShared } from './app.module.shared';
 import { AppComponent } from './components/app/app.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
     bootstrap: [ AppComponent ],
     imports: [
         ServerModule,
-        AppModuleShared
+        AppModuleShared,
+        NoopAnimationsModule
     ]
 })
 export class AppModule {

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[];