Angular Router Title and TitleStrategy

By Arvind Rai, 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'
}

3. By default, titles are updated using 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

The title 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'
					}
				]
			}
		]
	}
];

For every route the page title will be updated with the value configured to 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 using TitleStrategy. The TitleStrategy provides a strategy for setting the page title after a router navigation. It has following methods.
a.

abstract updateTitle(snapshot: RouterStateSnapshot): void

Performs the application title update.
b.

buildTitle(snapshot: RouterStateSnapshot): string | undefined

Finds the value of title property from the RouterStateSnapshot.
c.

getResolvedTitleForRoute(snapshot: ActivatedRouteSnapshot)

Returns the final value of the 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`;
    }
  }
}

In the above code, we are appending “My App” to the value of 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 { }

3. Find the routes.

const personRoutes: Routes = [
	{
		path: 'person',
		component: PersonComponent,
		title: 'Person',
		children: [
			{
				path: '',
				component: PersonListComponent,
				title: 'Person List',
				children: [
					{
						path: ':id',
						component: PersonEditComponent,
						title: 'Edit Person'
					}
				]
			}
		]
	}
];

For the path /person, we get the title as “My App - Person List”.

For the path /person/:id, we get the title as “My App - 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'
	}
];

For the route /address, the title property has not been configured. So our custom title strategy will update the title with default value i.e. “My App – Home”.