To set a title to web page which display on browser’s tab, browser’s window and most importantly useful on SEO for search engines to understand the title of that particular web page, there are a <title> tag which is used inside <head> of web page source code. To do same thing on angular, many beginners thinks they can simple use {{title}} (where title is the variable where title saved) in <title> tag like this.

<title>{{title}}</title>

But this turns out an error. As that title variable you used is out of the scope of controller where you have declared it. And that’s why now angular has Titel in “@angular/platform-browser” and setTitle method of it’s object. So you can use it like this.

import {Title} from "@angular/platform-browser";

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

But still you have to code this on each of your controller. So here is a solution which you can use. You can use app.controller.ts which is used on any route you running (on general structure of angular app). So here you can take advantage of app.controller.ts and write your code once on it’s constructure. And to declare title for each route you use, you can declare it on router’s data field.

Best way to set <title> in Angular

Write code for Titel in “@angular/platform-browser” in app.controller.ts and use rouer events to execute it at right time.

import { Component } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { Title } from '@angular/platform-browser';
import { filter, map } from "rxjs/operators";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {

    constructor (private router: Router, private activatedRoute:    ActivatedRoute, private titleService: Title) {
        this.router.events.pipe(
            filter(event => event instanceof NavigationEnd),
            map(() => {
                let child = this.activatedRoute.firstChild;
                while (child) {
                    if (child.firstChild) {
                        child = child.firstChild;
                    } else if (child.snapshot.data &&    child.snapshot.data['title']) {
                        return child.snapshot.data['title'];
                    } else {
                        return null;
                    }
                }
                return null;
            })
        ).subscribe( (data: any) => {
            if (data) {
                this.titleService.setTitle(data + ' - Website Name');
            }
        });
    }

}

Now declare title for each particular route you declare on data field like this.

const routes: Routes = [
    {
        path: 'dashboard',
        component: DefaultDashboardComponent,
        data: {
            title: 'Dashboard'
        }
    }
];

Here is my answer for the same on StackOverflow.