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.
