DEV Community

Cover image for Setting Page Titles Natively With The Angular Router 🔥

Setting Page Titles Natively With The Angular Router 🔥

Brandon Roberts on February 01, 2022

When building applications with Angular, one common thing you should do is have the page title update after each successful navigation. This helps ...
Read full post
Collapse
 
alaindet profile image
Alain D'Ettorre •

Didn't know about the new Title Strategy, thank you!

Collapse
 
rodrigokamada profile image
Rodrigo Kamada •

Great article! 👏

Collapse
 
jessedebruijne profile image
Jesse de Bruijne •

Great stuff! Now to convince my company to drop IE11 support so we can update :D

Collapse
 
azhe403 profile image
Azhe Kun •

Thank you for the great article! 🧡🧡

Collapse
 
ronaldohoch profile image
Ronaldo Hoch •

Awesome ❤️_❤️

Collapse
 
gangadharreddy9 profile image
Gangadhar •

Thanks

Collapse
 
chandrakantnaik789 profile image
chandrakant anik •

It's so owesome, loved this strategy

Collapse
 
mtpultz profile image
Martin Pultz • • Edited

Is it possible to read the title out of the route config in a component? Want to use the TitleStrategy to append ${title} | ${companyName}, but want to get the title in the component as well. I can see it in the snapshot data, but can't seem to access it:

this.route.snapshot.data[Symbol('RouteTitle')])
Enter fullscreen mode Exit fullscreen mode
Collapse
 
fbanyai profile image
Flávio Banyai •

Hey Martin,

I was also trying to figure how to do it... It happens to be easier than I thought! :)

this.route.routeConfig.title
Enter fullscreen mode Exit fullscreen mode
Collapse
 
marklagendijk profile image
Mark Lagendijk • • Edited

If you want to read this in a higher level component this is a bit tricky.
I came up with the following solution that combines router events with the Title service to create an observable:

export class MyComponent{
  title$: Observable<string>;

  constructor(
    titleService: Title,
    router: Router
  ) {
    this.title$ = router.events.pipe(
      // Use startWith to get the initial title
      startWith(titleService.getTitle()),
      // The title is set after the last router event, so we need to wait until the next application cycle
      delay(0),
      map(() => titleService.getTitle())
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

You could also call the Title service directly from your template. However, this is normally bad practice, because it would be called quite often.

export class MyComponent{
  constructor(
    public titleService: Title,
  ) {
  }
}
Enter fullscreen mode Exit fullscreen mode 
<h2>{{ titleService.getTitle()</h2>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
faradoxuzb profile image
faradoxuzb •

What about dynamic page title?

Collapse
 
brandontroberts profile image
Brandon Roberts •

You can still do dynamic page titles

Collapse
 
sandeepsuvit profile image
Sandeep K Nair •

Great article. I had a question though. Will the 'setTitle' from the platform-browser package work for the same case if we set it the component level?

angular.io/api/platform-browser/Title

Collapse
 
brandontroberts profile image
Brandon Roberts •

Thanks! Good question. My thought is that this would overwrite your title set at the component level because the components are activated before the navigation cycle is complete.

If you wanted to opt-out of this, you could probably set an empty title route property so it doesn't update the title.

Collapse
 
hamzakhaled profile image
Hamza Khalid •

thank you :)

Collapse
 
spock123 profile image
Lars Rye Jeppesen •

This is very useful and awesome. Thanks