Last updated: 2024-05-27
Setting the page title with Angular
Angular provides native support for handling the page title. How can we use this feature in the current Angular version 19?
The title for each page can be set directly in the title attribute in the app.routes.ts. Unlike in older versions, a workaround via the data attribute is no longer necessary. In the following example, the title is also localized - otherwise a simple string would be enough.
Defining a page title for a route
And that's all! If we want to add a prefix or suffix to the title for all pages, we can also add our own title strategy on top.
Defining our own TitleStrategy
This class additionally extends each title with the prefix ' - Bootify.io'. For this strategy to become active, we need to integrate it into our app.config.ts.
Adding the TitleStrategy to our config
Angular 19 offers a simple and flexible way to design the page titles according to our needs. All applications that are created in Bootify's Free plan with Angular as the frontend stack automatically come with a custom title strategy as described here.
Start Project
No registration required
