Search⌘ K
AI Features
Home
Courses
Animations in Angular

Introduction to Angular Animations

Explore the fundamentals of Angular animations by understanding how to use the @angular/animations package. Learn to create animation triggers, states, styles, transitions, and control timing for smooth visual effects within Angular components.

We'll cover the following...

Angular animations are based on CSS web transition functionality, which means that anything that can be styled or transformed through CSS can be animated the same way using Angular animations, with the added advantage of giving the developer more control in orchestrating it. This provides us with animations that have CSS-like performance along with the flexibility of JavaScript out of the box without additional dependencies.

How to use

To use @angular/animations in our application, we’ll have to do the following:

  1. Verify that the @angular/animations package is installed and listed as a dependency in our package.json. If not, add it by running npm install --save @angular/animations
  2. Import BrowserAnimationsModule and add it to the module’s imports array (line 7):
TypeScript 3.3.4
// app.module.ts
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
@NgModule({
  imports: [BrowserAnimationsModule],
})
export class AppModule {}

Angular also comes with NoopAnimationsModule, ...