In the new version of angular 14 a new cool feature has been added that allows to set the page title easily based on the current route that is rendered.
The Route interface has been expanded with a new property called title.
This property can be either a static string or a custom resolver to set a dynamic title.
Example:
export const routes: Routes = [
{
path: 'hello',
title: 'Hello!',
...
}
]
With Resolver:
@Injectable({ providedIn: 'root' })
class HelloTitleResolver implements Resolve<string> {
constructor(private randomEmoji: RandomEmojiService) { }
resolve(route: ActivatedRouteSnapshot) {
return this.randomEmoji.emoji().pipe(
map(e => `Hello ${e}!`)
);
}
}
export const routes: Routes = [
{
path: 'hello',
title: HelloTitleResolver,
...
}
]
Angular also provides a PageTitleStrategy that allows to set a global strategy to handle the title for all routes.
Top comments (0)