Angular Router Title and TitleStrategy
May 12, 2023
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”.
