Posted on Jul 17, 2022 • Edited on Jul 19, 2022

Dynamic Tab Title in Angular

#javascript #angular #webdev #dynamictabtitle

With Angular 14, Now we can generate dynamic tab titles with ease.

1. Title property in Routes

Use Case:

Users page with users as tab name.(Users)
Orders page with orders as tab name(Orders)

Then simply use title property in Routes as below

Code

 export const APP_ROUTES: Routes = [ {path: '/users', component: UsersComponent, title: 'Users'}, {path: '/orders', component: OrdersComponent, title: 'Orders'} ];

2. Title with Resolve

Use Case:

Users page with current user name in tab name.(User- Bharath)
Orders page with order id in tab name.(Order Id:1)

Then we should create a service which implement Resolve class from Router module as shown below.

Code:

 @Injectable({ providedIn: "root" }) export class CustomTitleResolver implements Resolve<string> { resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> | Promise<string> | string { // Have fun with naming return "<<project-name>> -" + route.paramMap.get("id") || ""; } }

Update Routes with title property

 export const APP_ROUTES: Routes = [ {path: '/users/:id', component: UsersComponent, title: CustomTitleResolver }, {path: '/orders/:id', component: OrdersComponent, title: CustomTitleResolver } ];

3. Title Strategy

Use Case:

If you want a more generalized pattern, that will be applied **all over the application.

Prefixing a text to tab title.(Project X Users)
Suffixing a text to tab title.(Users Project X )

Then create a service that extends TitleStrategy and add it as Provider in AppModule.

Code

 @Injectable({ providedIn: "root" }) export class CustomTitleStrategy extends TitleStrategy { constructor(private readonly title: Title) { super(); } override updateTitle(routerState: RouterStateSnapshot): void { const title = this.buildTitle(routerState); if (title !== undefined) { this.title.setTitle(`myImpact (${title})`); } else { this.title.setTitle('myImpact'); } } }

Naming Strategy should be added as provider in app module, so that angular is aware that you have provided an alternative Naming strategy.

 @NgModule({
 declarations: [
 ],
 imports: [
 ],
 providers: [{
 provide: TitleStrategy,
 useClass: IAMTitleStrategy
 }],
 bootstrap: [AppComponent]
 })
 export class AppModule {
 }