How can I set a dynamic page title in Angular 8 using routing data

Question

How can I set a dynamic page title in Angular 8 using routing data in component?

Answer 1

You can access the route's data property from the snapshot like this:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';

@Component({
    templateUrl: './app/home/welcome.component.html'
})
export class WelcomeComponent implements OnInit {
    public pageTitle: string;

    constructor(private titleService: Title, private route: ActivatedRoute) {
      this.titleService.setTitle(this.route.snapshot.data['title']);
    } 

}

This requires injecting the ActivatedRoute, then accessing the route's snapshot. You can use the snapshot instead of subscribing since the data is static.

See this link for titleService in Angular : https://angular.io/guide/set-document-title.

Hope this helps.