DEV Community

Bharath Muppa for Entangled Cognition

Posted on • Updated on

Dynamic Tab Title in Angular

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


Enter fullscreen mode Exit fullscreen mode

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") || "";
  }
}



Enter fullscreen mode Exit fullscreen mode

Update Routes with title property



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


Enter fullscreen mode Exit fullscreen mode

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');
    }
  }
}


Enter fullscreen mode Exit fullscreen mode

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 {
}

Enter fullscreen mode Exit fullscreen mode




Note

Depending on your use case, you can use either of these ways and also mix up both Resolve and naming Strategy like me

Dynamic Tab titles using angular

Happy coding 👨‍💻 !!

Top comments (0)