Angular Router Title and TitleStrategy
May 12, 2023
On this page we will learn updating title for Angular router application using Route.title
property.
1. In Angular version 13.2, we can uniquely set the page title per route using
Route.title
property in our Angular routing application.
2. The
title
property is used with other Route
properties such as path
, component
etc.
{ path: 'add', component: AddCountryComponent, title: 'Add Country' }
DefaultTitleStrategy
. We can customize the title strategy using TitleStrategy
.
On this page we will create routes with
title
property and customize it using TitleStrategy
with examples.
Using Route.title Property
Thetitle
property of Route
is used as following.
const countryRoutes: Routes = [ { path: 'country', component: CountryComponent, title: 'Country', children: [ { path: 'add', component: AddCountryComponent, title: 'Add Country' }, { path: 'list', component: CountryListComponent, title: 'Country List', children: [ { path: 'view/:country-id', component: CountryDetailComponent, title: 'View Country' }, { path: 'edit/:country-id', component: CountryEditComponent, title: 'Edit Country' } ] } ] } ];
title
property.
Hence for the URL /country, the title will be “Country”.

For the URL /country/add, the title will be “Add Country”.
For the URL /country/list, the title will be “Country List”.
For the URL /country/list/view/:country-id, the title will be “View Country”.
For the URL /country/list/edit/:country-id, the title will be “Edit Country”.
TitleStrategy
We can customize our title strategy usingTitleStrategy
. The TitleStrategy
provides a strategy for setting the page title after a router navigation. It has following methods.
a.
abstract updateTitle(snapshot: RouterStateSnapshot): void
b.
buildTitle(snapshot: RouterStateSnapshot): string | undefined
title
property from the RouterStateSnapshot
.
c.
getResolvedTitleForRoute(snapshot: ActivatedRouteSnapshot)
Route.title
property, which can either be a static string or a resolved value.
To update the page title, we can create custom
TitleStrategy
as following.
1. Create a class that extends
TitleStrategy
. Override updateTitle
method and customize the title according to requirements.
custom-titlestrategy.ts
import { Injectable } from '@angular/core'; import { TitleStrategy, RouterStateSnapshot } from '@angular/router'; @Injectable() export class CustomTitleStrategy extends TitleStrategy { override updateTitle(routerState: RouterStateSnapshot) { const title = this.buildTitle(routerState); if (title !== undefined) { document.title = `My App - ${title}`; } else { document.title = `My App - Home`; } } }
Route.title
property. If title
is not configured for any route then default title is applied.
2. Configure the
TemplatePageTitleStrategy
using providers
in application module.
import { TitleStrategy } from '@angular/router'; import { CustomTitleStrategy } from './custom-titlestrategy'; ------ @NgModule({ ------ providers: [ {provide: TitleStrategy, useClass: CustomTitleStrategy} ], ------ }) export class AppModule { }
const personRoutes: Routes = [ { path: 'person', component: PersonComponent, title: 'Person', children: [ { path: '', component: PersonListComponent, title: 'Person List', children: [ { path: ':id', component: PersonEditComponent, title: 'Edit Person' } ] } ] } ];

Find the another routes.
const routes: Routes = [ { path: 'address', component: AddressComponent }, { path: '', redirectTo: '/country', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent, title: 'Page Not Found' } ];
title
property has not been configured. So our custom title strategy will update the title with default value i.e. “My App – Home”.