Building stateful route behavior with RouterLinkActive

It is often the case when building applications that you will want to build features that would involve which page the application is currently on. When this is a one-time inspection, it isn't a problem, as both Angular and default browser APIs allow you to easily inspect the current page.

Things get a bit stickier when you want the state of the page to reflect the state of the URL, for example, if you want to visually indicate which link corresponds to the current page. A from-scratch implementation of this would require some sort of state machine that would know when navigation events occur and what and how to modify at each given route.

Fortunately, Angular 2 gives you some excellent tools to do this right out of the box.

Note

The code, links, and a live example of this are all available at http://ngcookbook.herokuapp.com/3308/.

Getting ready

Begin with the Array and anchor-tag-based implementation shown in the Navigating with routerLinks...