Angular’s new router title feature

How to apply Angular's latest router feature to dramatically simplify your code

When building Angular apps it's good practice to update the title of the tab on every successful navigation.

Adding a page title improves accessibility and user experience. So far, you had to build this feature yourself, however, in Angular 14, this feature is provided by the framework. Let’s take a look.

What we had to do so far

To change the page title after successful navigation we had to provide the page title as a data property in our route configuration.

Provide the page title as route data

We then manually had to implement some logic to access the provided title attribute and update the tab's title.

Manual implementation to change the tab title

We had to listen to all NavigationEnd events and then map this event into the title of the tab. We then finally used a titleService which we inject as Title from @angular/platform-browser to set the title.

This implementation still works in Angular v14 but it can be dramatically simplified.

Built-in router title

In Angular v14 we don’t have to implement the logic we explored above anymore. We simply have to use the new title property on the route configurations.

Use the title attribute to provide new page titles

That’s it. With this code, the page title updates on every successful navigation.

Wow. This is awesome. But, in our use case, we have to prefix every title with the application name, and this is often forgotten by new developers in our team. Well, in such cases we can overwrite the global TitleStrategy.

Do you want to take your Angular, RxJS, TypeScript, and JavaScript skills to the next level? Don’t…