Angular 7 — Improved Router Transition Animation

I give you improved and more efficient way to implement fluid route transitions using Angular 7 Route transition animations. Make pages slide from left or right when navigating between tabs.

Photo by Lance Asper on Unsplash

📝 You may have seen my other article (older) about this topic. This new article is improved and more efficient implementation with extra details.

• Less Code due to Angular animations selector -> ':increment', ':decrement'
• Working animation for Lazy loaded components
• Efficient animation state detection without navigation service
• Fixed animation handling when having many tabs

* Demonstration

👨‍💻 Source code on GitHub

💻 StackBlitz Editor of the project

* TL;DR

• In the component.ts where <router-outlet> is located add the following line to the Component directive animations: [routerAnimation()]. Copy routerAnimation function from my project source code.
• Wrap the <router-outlet> with the div container to trigger animation. This way animation triggers when route changes

• Add getRouteAnimation() function to the same component’s TypeScript file. This function is used to determine which animation should be triggered when route changes.

• You need to add correct number to the route data. From getRouteAnimation(outlet: RouterOutlet), you can see that outlet.activatedRouteData.num is used to determine new route’s animation state. So for example, you need to somehow tell Angular that Science is 1st tab, Technology is 2nd tab, Business 3rd and Sports 4th. You should do this by providing num value to the route data.

• Do the same for lazy loaded modules and they will behave similar to the normal components. You can see that BusinessComponent’s route has num value 7.

👍 You can read more about Complex Animations on Angular.io

📝 See my previous article about this subject on Medium. Angular — Route transition Animation, change page back and forth (v5)

😃 Thanks for reading & have a nice day.

If you don’t understand something feel free to ask me for any help you might need, I will be more than happy to help any of you. Please leave the feedback. Angular ♥