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.
We then manually had to implement some logic to access the provided title
attribute and update the tab's 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.
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…