Example of using BrowserAnimationsModule

SteveSandersonMS · SteveSandersonMS · commit c0c47e3def20 · 2017-08-24T15:44:56.000-07:00
diff --git a/templates/Microsoft.DotNet.Web.Spa.ProjectTemplates/angular/ClientApp/app/app.module.browser.ts b/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 }
diff --git a/templates/Microsoft.DotNet.Web.Spa.ProjectTemplates/angular/ClientApp/app/app.module.server.ts b/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 {
diff --git a/templates/Microsoft.DotNet.Web.Spa.ProjectTemplates/angular/ClientApp/app/components/fetchdata/fetchdata.component.html b/templates/Microsoft.DotNet.Web.Spa.ProjectTemplates/angular/ClientApp/app/components/fetchdata/fetchdata.component.html
@@ -14,7 +14,7 @@ <h1>Weather forecast</h1>
         </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>
diff --git a/templates/Microsoft.DotNet.Web.Spa.ProjectTemplates/angular/ClientApp/app/components/fetchdata/fetchdata.component.ts b/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[];
