What are the steps to use animation module?

You need to follow below steps to implement animation in your angular project,

1. Enabling the animations module: Import BrowserAnimationsModule to add animation capabilities into your Angular root application module(for example, src/app/app.module.ts).

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   
   @NgModule({
     imports: [BrowserModule, BrowserAnimationsModule],
     declarations: [],
     bootstrap: [],
   })
   export class AppModule {}

2. Importing animation functions into component files: Import required animation functions from @angular/animations in component files(for example, src/app/app.component.ts).

   import {
     trigger,
     state,
     style,
     animate,
     transition,
     // ...
   } from '@angular/animations';

3. Adding the animation metadata property: add a metadata property called animations: within the @Component() decorator in component files(for example, src/app/app.component.ts)

   @Component({
     selector: 'app-root',
     templateUrl: 'app.component.html',
     styleUrls: ['app.component.css'],
     animations: [
       // animation triggers go here
     ]
   })