Angular Animation Setup

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

app.module.ts (Angular 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.

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.

• Practice Test for Angular4
• Govt Certification in Angular 4
• Blog posts on Angular 4 and Web Development

Back to Angular 4 Tutorial Main Page