How can I dynamically get the 'title' value of a route when it changes while navigating?

Question

Context and problem

I've defined a few routes inside an app-routing.module as follows:

// imports

const routes: Routes = [
  { path: 'home', title: 'Home Route', component: HomeComponent },
  { path: 'other', title: 'Other Route', component: OtherComponent},
  { path: 'another', title: 'Yet Another Route', component: YetAnotherComponent },
  { path: '',   redirectTo: 'home', pathMatch: 'full' },
];

@NgModule({
  declarations: [],
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

And I've also defined a navigation-title.component which I want to use to display the current route as "My App | Home Route" or "My App | Other Route" , for example.

However, there doesn't seem to be a straightforward way to bind to the route title.

Things I've tried

Injecting ActivatedRoute into my navigation-title component

I first tried injecting a private activatedRoute: ActivatedRoute and binding to this.activatedRoute.title (which is an Observable<string | undefined> ) with an async pipe, but this activated route doesn't actually seem to change while you navigate about.

Hooking to router navigation events

Next, I tried subscribing to the router events, specifically to NavigationEnd , in order to update the title, but retrieving the title from the activated route when the navigation ended always resulted in getting the title of the previous route.

Binding to the router outlet

Finally, I bound to the router-outlet 's (activate) event with an event handler inside my navigation-title.component using some code behind (see this gist for more details), but unfortunately this results in a tight coupling between my title component and the router outlet.

Isn't there a better (ie fully decoupled) way to simply get the route title from an injected Router or ActivatedRoute somehow?

PS

I certainly DO NOT want to work with the TitleService because it makes no sense to let a component set the page title when you can already define it inside the route that yields said component.

Answer 1

If the title it not dynamic but you still want to do something different, you could use the tittle strategy from angular 14 +

Source: https://dev.to/brandontroberts/setting-page-titles-natively-with-the-angular-router-393j

@Injectable()
export class TemplatePageTitleStrategy extends TitleStrategy {
  constructor(private readonly title: Title) {
    super();
  }

  override updateTitle(routerState: RouterStateSnapshot) {
    const title = this.buildTitle(routerState);
    if (title !== undefined) {
      this.title.setTitle(`My App | ${title}`);
    }
  }
}

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [
    {
      provide: TitleStrategy,
      useClass: TemplatePageTitleStrategy
    }
  ]
})
export class AppRoutingModule {}