Create a title service class name like title.service.ts and put below code.

import { Injectable } from ‘@angular/core’;

import ‘rxjs/add/operator/filter’;
import ‘rxjs/add/operator/map’;
import ‘rxjs/add/operator/mergeMap’;

import { Router, NavigationEnd, ActivatedRoute } from ‘@angular/router’;
import { Title } from ‘@angular/platform-browser’;

const APP_TITLE = ‘My App’;
const SEPARATOR = ‘ | ‘;

@Injectable()
export class TitleService {
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private titleService: Title,
) {}

init() {
this.router.events
.filter((event) => event instanceof NavigationEnd)
.map(() => {
let route = this.activatedRoute;
while (route.firstChild) route = route.firstChild;
return route;
})
.filter((route) => route.outlet === ‘primary’)
.mergeMap((route) => route.data)
.map((data) => {
if ( data.title ) {
// If a route has a title set (e.g. data: {title: “Foo”}) then we use it
return data.title;
} else {
// If not, we do a little magic on the url to create an approximation
return this.router.url.split(‘/’).reduce((acc, frag) => {
if ( acc && frag ) { acc += SEPARATOR; }
return acc + TitleService.ucFirst(frag);
});
}
})
.subscribe((pathString) => this.titleService.setTitle(`${APP_TITLE} ${SEPARATOR} ${pathString}`));
}

static ucFirst(string) {
if ( !string ) { return string; }
return string.charAt(0).toUpperCase() + string.slice(1);
}
}

 

Next, you have add this service to your app.module.ts file
import {TitleService} from “./title.service”;

and add this service to providers array
@NgModule({
declarations: [
AppComponent,
BlogComponent,
FontcolorDirective
],
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // debugging purposes only
)
],
providers: [TitleService],
bootstrap: [AppComponent]
})

Next, you have to add below code on app.component.ts file for importing the service and init the service on ngOnInit method.
import {TitleService} from “./title.service”;

export class AppComponent implements OnInit {

constructor(private titleService: TitleService) {}

ngOnInit(): void {
this.titleService.init();
}
}

If you do not have any route then you have to add route to test this or executing this functionality.

Here, i have declare a blog route and i have set the title as Blogs like below.

const appRoutes: Routes = [
{ path: ‘blog’, component: BlogComponent , data: { title: ‘Blogs’ }},

];

Finally, if you click this blog link you see the title MyApp | Blogs like below screenshot.