Animation Setup

Go back to Tutorial

Before you can add animations to your application, you need to import a few animation-specific modules and functions to the root application module.

app.module.ts (animation module import excerpt)

import { BrowserModule } from ‘@angular/platform-browser’;

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;

@NgModule({

imports: [ BrowserModule, BrowserAnimationsModule ],

// … more stuff …

})

export class AppModule { }

Example basics

The animations examples in this guide animate a list of heroes.

A Hero class has a name property, a state property that indicates if the hero is active or not, and a toggleState() method to switch between the states.

hero.service.ts (Hero class)

export class Hero {

constructor(public name: string, public state = ‘inactive’) { }

toggleState() {

this.state = this.state === ‘active’ ? ‘inactive’ : ‘active’;

}

}

Across the top of the screen (app.hero-team-builder.component.ts) are a series of buttons that add and remove heroes from the list (via the HeroService). The buttons trigger changes to the list that all of the example components see at the same time.

Go back to Tutorial