Angular route transition animation in 5 easy steps

Angular provides a beautiful way to animate the transition between the routes using Route Transition Animation. Today I will show you how to implement this with 5 easy steps.

Step 1: Create a new Angular application

Let’s get started with creating a new angular application by typing following command in Terminal.

ng new application-name --style=scss --routing

Create three new components named

• home
• contact
• about

ng g c home
ng g c contact
ng g c about

Step 2: Setup basic routing

Add component routes in app-routing.module.ts file.

const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: '/home' },
     { path: 'home', component: HomeComponent },
     { path: 'about', component: AboutComponent },
     { path: 'contact', component: ContactComponent },
];

Delete everything and add the following code in app.component.html

<header>
    <a routerLink="home" routerLinkActive="active">Home</a>
    <a routerLink="about" routerLinkActive="active">About</a>
    <a routerLink="contact"…