Dynamically set page title based on active route in Angular 6+ .. (Corrected & Simplified Version)

app.component.ts

import { Component, OnInit } from '@angular/core';
import { TitleService } from './shared/title/title.service';

@Component({
  selector: 'ny-app',
  templateUrl: './app.component.html',
  styles: [],
})
export class AppComponent implements OnInit {

  constructor(private titleService: TitleService) { }

  ngOnInit() {
    this.titleService.boot();
  }
}

app.module.ts

import ...

@NgModule({
   ...
   providers: [ TitleService ],
})
export class AppModule { }

example-routing.ts

const routes: Routes = [{
    path: '',
    component: HomeComponent,
    data: {title: "My Home Page"},
  }, {
    path: 'detail/:id',
    component: DetailComponent,
  }];

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

title.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class TitleService {
  default_title = 'My App'

  constructor(
    private router: Router,
    private activeRoute: ActivatedRoute,
    private title: Title
  ) { }

  boot() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => this.activeRoute),
      map(route => route.firstChild),
      switchMap(route => route.data),
      map((data) => {
        return data && data.title ? `${data.title} • ${this.default_title}` : this.default_title;
      })
    ).subscribe((current_title) => this.title.setTitle(current_title));
  }
}

Well done in an elegant way. Thought about handling ActivatedRoute params as well? I mean - mapping them to subtitles.
Your solution is also useful while used with Gtag to avoid a single boring "Angular App" page title in Analytics.

Thanks for sharing this. I've tweaked your solution in order to make it work with lazy loaded modules.

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

@Injectable({
  providedIn: 'root',
})
export class TitleService {
  defaultTitle = 'RemoveBounce.com'

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private title: Title,
  ) {
  }

  boot() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
        map(() => {
          let child = this.activatedRoute.firstChild;
          while (child.firstChild) {
            child = child.firstChild;
          }
          if (child.snapshot.data['title']) {
            return child.snapshot.data['title'];
          }
          return this.defaultTitle;
        }),
    ).subscribe((currentTitle) => this.title.setTitle(currentTitle));
  }
}