BrowserAnimationsModule setup in Angular

Introduction

BrowserAnimationsModule enables smooth animations in Angular apps. It helps your app look lively and interactive.

When you want to add fade, slide, or other animations to your Angular components.

When using Angular Material components that require animations to work properly.

When you want to improve user experience with visual feedback on actions.

When you want to animate route transitions between pages.

When you want to control animation timing and effects in your app.

Syntax

Angular

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

@NgModule({
  imports: [
    BrowserAnimationsModule,
    // other modules
  ],
  // declarations, bootstrap, etc.
})
export class AppModule { }

Always import BrowserAnimationsModule in your root module (usually AppModule).

Do not import BrowserAnimationsModule multiple times in feature modules.

Examples

Basic setup importing BrowserAnimationsModule in the root module.

Angular

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

@NgModule({
  imports: [BrowserAnimationsModule],
})
export class AppModule { }

Importing BrowserAnimationsModule alongside other Angular modules.

Angular

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [BrowserAnimationsModule, FormsModule],
})
export class AppModule { }

Sample Program

This example shows how to set up BrowserAnimationsModule and create a simple fade animation on a heading. Clicking the button toggles the heading's visibility with a smooth fade effect.

Angular

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-root',
  template: `
    <h1 [@fadeInOut]="isVisible ? 'visible' : 'hidden'">Hello Animations!</h1>
    <button (click)="toggle()">Toggle</button>
  `,
  animations: [
    trigger('fadeInOut', [
      state('visible', style({ opacity: 1 })),
      state('hidden', style({ opacity: 0 })),
      transition('visible <=> hidden', [animate('500ms ease-in-out')])
    ])
  ]
})
export class AppComponent {
  isVisible = true;
  toggle() {
    this.isVisible = !this.isVisible;
  }
}

Important Notes

Without BrowserAnimationsModule, Angular animations will not run and may cause errors.

Use Angular DevTools or browser DevTools to inspect animation states and timings.

Animations improve user experience but use them sparingly to keep the app fast.

Summary

Import BrowserAnimationsModule in your root Angular module to enable animations.

Use it when you want smooth, interactive visual effects in your app.

Combine with Angular animation APIs to create custom animations easily.