Angular Router Animations: the tricky bits

Most articles & tutorials on this topic cover the same simple scenario. This one is different.

What example am I referring to? The one in which an app:

routes between different components

(e.g. HomeComponent to ContactComponent to SettingsComponent )

(e.g. to to ) and animates in one direction only, like this:

“Why does it always move left?”

In this article our example will be able to handle changes on a route parameter and will rock the left and right animation 💪. So strap in, we’re gonna talk about some new, possibly advanced stuff here!

I’ve put the completed code on Github and you can see the working demo on StackBlitz.

Problem 1: Route definition

“Oooh, it’s the same component!”

It’s not uncommon to have a nested routes with params, right?

E.g. you have a list of items, select an item and see a page with the item’s details. From that page you may want to go directly to the next or previous item’s page.

The routing definition can look like this:

app-routing.module.ts