Angular Router Animation

Single page applications are awesome and it helps us to implement Mobile and Tablet based sites. Basically, it gives the feeling of Mobile application. You can implement single page application in Angular 2/4, goes without saying! So if you are building single page application in Angular you can further enhance the single page routing by adding Angular Router Animation.

To achieve Angular Router Animation, we will use Angular animation. If you are not well-versed with Angular animation I would like to request you to readthis article. Once you complete this article this, you can go ahead to apply these animations in your application, One of the best examples isNavigation drawerand much more.

In this article, we will understand the working of Angular Animation example and Angular means Angular version greater than 2.x unless stated otherwise.

 Demo

1. Setting up our Application

Let’s use Angular CLI to setup our application. If you don’t have Angular CLI installed on your machine run the below command to install it globally.
npm install -g angular-cli
After Angular CLI installation, to create a new Angular project Run below command. This command will create all the necessary files, download all the required external dependencies and do all of the setup work for us.

ng new AppName

2. Setting up application routes

Now before going any further let’s first create the Angular routes. Create anapp.routing.tsfile inside the/appfolder and write down the below code.

app.routing.ts:

/*
* Angular Router Animation
* @author Shashank Tiwari
*/import { ModuleWithProviders } from '@angular/core';
import { Routes , RouterModule } from '@angular/router';

import { ContactUsComponent } from './contact-us/contact-us.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { HomeComponent } from './home/home.component';


const appRoutes :Routes = [
{ path : '' , component : HomeComponent},
{ path : 'contact' , component : ContactUsComponent},
{ path : 'about' , component : AboutUsComponent},
{ path : '**' , component : HomeComponent},
];

export const appRouting :ModuleWithProviders = RouterModule.forRoot(appRoutes);

In the above code, we have defined two routes/aboutand/contactwith respective components.

3. app.module.ts

In the below code, we have done the necessary setup for the application and we have done the import of application’s routing.

app.module.ts:

/*
* Angular Router Animation
* @author Shashank Tiwari
*/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { appRouting } from './app.routing';

import { AppComponent } from './app.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { HomeComponent } from './home/home.component';

@NgModule({
    declarations: [
        AppComponent,
        ContactUsComponent,
        AboutUsComponent,
        HomeComponent
    ],
    imports: [
        BrowserModule,
        appRouting,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

4. Angular Router Animation

Now, let’s get to the business, as we already know in this application we have three component for three different routes. So here we will start from/aboutroute and the About component. So open theabout-us.component.tsand write down the below code.

about-us.component.ts:

/*
* Angular Router Animation
* @author Shashank Tiwari
*/
import { Component, OnInit } from '@angular/core';
import { trigger, state, animate, transition, style } from '@angular/animations';

@Component({
selector: 'app-about-us',
templateUrl: './about-us.component.html',
styleUrls: ['./about-us.component.css'],
host: {
'[@slideInOutAnimation]': ''
    },
    animations:[
  trigger('slideInOutAnimation', [ 
    state('*', style({
    position: 'fixed',
        color:'rgb(3, 109, 99)',
        textAlign: 'center',
        paddingTop:'5%',
        backgroundColor: 'rgba(0, 240, 252, 0.38)',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0
    })
    ),
        transition(':enter', [
            style({
                transform: 'translateX(-100%)',
                backgroundColor: 'rgba(0, 240, 252, 0.38)'
            }),
            animate('500ms', style({
                transform: 'translateX(0%)',
        backgroundColor: 'rgba(0, 240, 252, 0.38)'
            }))
        ]),
        transition(':leave', [
            animate('500ms', style({
            transform: 'translateX(-100%)',
        backgroundColor: 'rgba(0, 240, 252, 0.38)'
            }))
        ])
    ])
     ]
})
export class AboutUsComponent {
constructor() { }
}

Explanation:

In the above code, We have two important things to notice and both the things are written in the component decorator. So the first is host property and the second property is animations. let’s understand each one of them,

1. host:

Map of class property to host element bindings for events, properties and attributes (from the doc) in other words we will bind the slideInOutAnimation animation to the root element by using this property.

2. animations:

In the second parameter of trigger function, we have an array where we write the actual animation stuff. So in that array, we have 3 values first is a state function and the other 2 functions are the transition function.

Here I would break the transition of the route in three different parts first isenteringsecond isleavingand the last isend state.

The state function will give the styles to the component when the route will be in the end state. The first transition function is for entering state of the route and the second is for leaving state.

In the Contact component the code will remain the same only if you wanna change animation then you can go ahead change the code, but in this case, we have the same animation in all component.

about-us.component.html:

<!-- 
Angular Router Animation
@author Shashank Tiwari
 -->
<h1 class="app-heading">Angular Router animation</h1>
<a routerLink="/" routerLinkActive="active">Home</a>
<a routerLink="/contact" routerLinkActive="active">Contact</a>
<a routerLink="/about" routerLinkActive="active">About</a>

Not much to see here, in the markup we have links to navigate between pages And when you click on any link the magic happens. So, for now, that’s it for this article. You can always leverage your single page application’s look and feel by adding such features.

For this article that’s it. I’ll be back with my new aticle soon. In the mean time if you like to request any article please let me know in below comment box.