how to use the animation module

The main Angular modules for animations are @angular/animations and @angular/platform-browser. When you create a new project using the CLI, these dependencies are automatically added to your project.

To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality.

Steps to implement animation in angular:-

1. Enabling the animations module: Import BrowserAnimationsModule to add animation
capabilities into your Angular root application module(i.e. 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(i.e. src/app/app.component.ts)

import { Component, HostBinding } from '@angular/core';
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(i.e. src/app/app.component.ts)

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