Angular Router Titles

app.component.ts

constructor(private router: Router,
                   private route: ActivatedRoute
                   private titleService: Title) {

   router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
       let title = this.getTitleFromRoute(route.root) + ' - Dinolytics';
       this.titleService.setTitle(title);
   });
}

private getTitleFromRoute(route) {
   if (route.snapshot.data.hasOwnProperty('title')) {
       return route.snapshot.data.title;
   }

   let children: ActivatedRoute[] = route.children;

   // iterate over route children
   for (let child of children) {
       // verify that we have the correct router outlet
       if (child.outlet !== PRIMARY_OUTLET) {
           continue;
       }

       if ( ! child.snapshot.data.hasOwnProperty('title')) {
           return this.getTitleFromRoute(child);
       }

       return child.snapshot.data.title;
   }

   return false;
}

app.routes.ts

export const routes = [{
   path: ':id',
   component: GroupsEditComponent,
   data: {
       title: 'Edit Group'
   },
}]