Angular detect dynamic page title on route change

Question

I have an angular 6 application where i want to store the page title on every route change,

import { Router, NavigationEnd, NavigationStart, RoutesRecognized } from '@angular/router';

export class AppComponent implements OnInit {

    constructor (
        public router: Router
    ) {
    }

    ngOnInit() {
          this.router.events.subscribe(event => {

      if (event instanceof NavigationStart) {
        // console.log('Starting Navigation');
      }

      if (event instanceof NavigationEnd) {
        console.log('Ending Navigation ', document.title);
      }
  });
    }

the issue is whenever i want to access the title of the current page , it shows the previous title set but not the new title which is being set dynamically from the component level

Any suggestion how to fix this ?

you can use a root provided service to set page's title and subscribe to the changes in the same service — Alon Yampolski, Oct 03 '19 at 12:19
you can inject Title service provided by Angular framework, it has a function getTitle() which gives the title of current component. More info - https://angular.io/guide/set-document-title — Hemendra, Oct 03 '19 at 12:21

score 1 · Answer 1 · answered Oct 03 '19 at 12:23

1

You can use the Title class in @angular/platform-browser,

Import statement

import{Title} from '@angular/platform-browser'

Inject it in the constructor

constructor(private title:Title){ }

Your router event subscription will look like

this.router.events.subscribe(event => {

      if (event instanceof NavigationStart) {
        // console.log('Starting Navigation');
      }

      if (event instanceof NavigationEnd) {
        alert(this.title.getTitle())
      }
  });

answered Oct 03 '19 at 12:23

Aravind

38,787
15
88
108

It seems that the result is the same – NikNik Oct 03 '19 at 12:25
@NikNik I don't understand your question – Aravind Oct 03 '19 at 12:27
Even if you use the Title class as you have shown, the problem is still there – NikNik Oct 03 '19 at 12:29

score 0 · Answer 2 · answered Oct 03 '19 at 12:23

I think you try to access the document title before it got reset by component level.

When you navigate to a route the router emits an event and after that the component gets initialized and your title will be reset here if I understood you correctly.

You can provide title data in your route for example:

const routes: Routes = [
    {
        path: 'my/route',
        component: MyComponent,
        data: {
           documentTitle: 'YOUR TITLE'
        }
    }
]

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

score 0 · Answer 3 · answered Oct 03 '19 at 12:45

What if you do it using pure javascript so in your app constructor

 new MutationObserver(function(mutations) {
    console.log(mutations[0].target.nodeValue);
}).observe(
    document.querySelector('title'),
    { subtree: true, characterData: true }
);

demo

reference so1 reference 2

NikNik · Answer 4 · 2019-10-03T12:58:01.950

-1

You can set the title in you child's component constructor:

constructor() { 
    document.title =  "newTitle";
}

or even better, as suggested in one of the answers:

constructor(private titleService: Title) { 
    this.titleService.setTitle("newTitle");
}

edited Oct 03 '19 at 12:58

answered Oct 03 '19 at 12:40

NikNik

2,105
1
12
32

Angular detect dynamic page title on route change

4 Answers4