How to give router transition animation in Angular ?

I follow these steps to create animation in angular. Enabling the animations module by importing    import { BrowserAnimationsModule } from '@angular/platform-browser/animations'   in your app.module.ts file next you need to create animation.ts file and write below code . import {   animate,   query,   style,   transition,   trigger,   group, } from '@angular/animations';   export function routerAnimation() {   return trigger('routerAnimation', [     // One time initial load. Move page from left -100% to 0%     transition('-1 => *', [       query(':enter', [         style({           position: 'fixed',           width: '100%',           transform: 'translateX(-100%)',         }),         animate(           '500ms ease',           style({             opacity: 1,             transform: 'translateX(0%)',           }),         ),       ]),     ]),       // Previous, slide left to right to show left page     transition(':decrement', [       // set new page X location to be -100%       query(         ':enter',         style({           position: 'fixed',           width: '100%',           transform: 'translateX(-100%)',         }),       ),         group([         // slide existing page from 0% to 100% to the right         query(           ':leave',           animate(             '500ms ease',             style({               position: 'fixed',               width: '100%',               transform: 'translateX(100%)',             }),           ),         ),         // slide new page from -100% to 0% to the right         query(           ':enter',           animate(             '500ms ease',             style({               opacity: 1,               transform: 'translateX(0%)',             }),           ),         ),       ]),     ]),       // Next, slide right to left to show right page     transition(':increment', [       // set new page X location to be 100%       query(         ':enter',         style({           position: 'fixed',           width: '100%',           transform: 'translateX(100%)',         }),       ),         group([         // slide existing page from 0% to -100% to the left         query(           ':leave',           animate(             '500ms ease',             style({               position: 'fixed',               width: '100%',               transform: 'translateX(-100%)',             }),           ),         ),         // slide new page from 100% to 0% to the left         query(           ':enter',           animate(             '500ms ease',             style({               opacity: 1,               transform: 'translateX(0%)',             }),           ),         ),       ]),     ]),   ]); } next in your app-routing.module.ts file,write below code where routes define , { path: 'abc', component: AbcComponent, data: { num: 1 } } { path: 'test', component: TestComponent, data: { num: 2 } } next in your app.component.ts file you need to write below code, import { routerAnimation } from './common/animations'; import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router';   @Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.scss'],   animations: [routerAnimation()], }) export class AppComponent {   constructor() {}     public getRouteAnimation(outlet: RouterOutlet) {     const res =       outlet.activatedRouteData.num === undefined         ? -1         : outlet.activatedRouteData.num;       return res;   } } next in app.component.html file you need to write below code, <div class="navbar">   <a [routerLink]="['abc']">Abc</a><xmp>   <a [routerLink]="['test']">Test</a><xmp>    </div>   <div class="content" [@routerAnimation]="getRouteAnimation(router)">   <router-outlet #router="outlet"></router-outlet> </div> follow all of the above steps to make animation in your angular projects.