Profile Picture

Lazy Panda



Angular Master Detail Router Navigation And Slide Animations

In many mordarn application, for usuability and user interaction or experience perspective we need to show the page in proper manner so that user can get the content and solve his purpose of user journey. In such cases, some times left or right side navigation helps to solve many purpose.

Adding slick animation and configure proper route is equally important for any application. In this tutorial, I will explain how you can create a master details page navigation as well as adding slide animation using BrowserAnimationsModule module.



First to setup Master Detail type page navigation using angular router.

Second will add another component in router module and add slide animation to it.


Setup Routes for Master Detail view

First, we need to set up some routes in our application. In this simple app, we will set a single route which is 'mat-table'. To support lazy loading, you need to follow as below.

Now, lets configure the master menus and corresponding details view. For that we need to add them to routing tree as children property.

You also need to set up the router-outlet accordingly so that whenever any chnage happen in master menus, it should reflect in detail page.


Slide Animation on route

Please add BrowserAnimationModule to app.module.ts file. 

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

States, Transitions, and Triggers

State is a static style definition. A transition defines how a property in the style will change. A trigger defines what action will cause one state to transition to another state.

State = What

Transition = How

Trigger = When

animation” = Triggered transition(s) from one state to another.

Create the animations:

First create a folter '_animations' and placed the followings -

Slide-in animation creation. 

Angular has some powerful pre-defined concepts in addition to the named states.

void = an element is entering or leaving the view.

* = any state

:enter and :leave are aliases for the void => * and * => void transitions.

Now you are almost ready to use the animation. But before you start please make the following changes to your component file as well. 


Now, you are ready to run the application. You can find the complete code from here.

Happy Coding!


Lazy Panda