How to set dynamic page titles in Angular 2/4


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.

Here’s a link to the Github Gist.

For explanations, please refer to the original post from Todd Moto