github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-23 10:08:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Example of using BrowserAnimationsModule

Browse Source
This commit is contained in:
Steve Sanderson
2017-08-24 15:44:56 -07:00
parent e5f1299239
commit c0c47e3def
4 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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