How to set dynamic page titles in Angular 2/4

Voice of Reason
Jul 28, 2017 · 2 min read

I’ve been creating projects using Google’s Angular frameworks for over 3 years now and in that time, I’ve needed to change the document title as the user moved through the app.

In Angular 1.x, I surmounted this challenge by moving my ng-app declaration to html tag (instead of the body tag) and then controlled the page title by using $broadcast and $on to determine when to change the $rootScope property that I used to keep track of the page title.

Angular 2/4 has been a different beast entirely and I never gave it (setting dynamic page titles) much thought until I worked on a project that required it. I was fine with having a single page title (usually the application’s name) for the lifetime of the apps I’ve built.

I did a bit of googling and found an article by Todd Moto of the Angular Team that solved the problem in the cleanest way I’ve seen yet.

As I usually do, I’m writing this up here so I don’t go head-scratching at a later date when I need to do this again.

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor(
private titleService: Title,
private activatedRoute: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
this.router.events
.filter((event) => event instanceof NavigationEnd)
.map(() => this.activatedRoute)
.map((route) => {
while (route.firstChild) {
route = route.firstChild;
}
return route;
})
.filter((route) => route.outlet === 'primary')
.mergeMap((route) => route.data)
.subscribe((event) => this.titleService.setTitle(event['title']));
}
}
Here's a link to the Github Gist.
For explanations, please refer to the original post from Todd Moto

Code Complete

I talk about all things upon which I dare to have an opinion. My stories may not appear connected but they sure touch on a lot of things that affect me…

Voice of Reason

Written by

Speaking from underneath my programmer’s hat… behind an observer’s desk

Code Complete

I talk about all things upon which I dare to have an opinion. My stories may not appear connected but they sure touch on a lot of things that affect me…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade