Jordan Hawker

Ember Spotlight #4: Ember-CLI-Document-Title October 07, 2015

This week’s spotlight is on an indispensable addon, Ember-CLI-Document-Title. This project takes your routing to the next level by allowing you to easily set your application’s document title on a per-route basis. Ember-CLI-Document-Title supports both static and dynamic page titles, giving you both ease of use and flexibility to meet your project’s needs. This week’s Open Source Good Deed™ was another Ember 2.x upgrade, bringing the addon up-to-date with the latest dependency versions.

I’m going to leave you with another great tip for using this addon, courtesy of some recent work by my CheckMate colleague Chris Nixon. We’re leveraging Ember-CLI-Document-Title to additionally set a page header in our application, like so:

Router.reopen({
  pageHeader: inject.service(),
  setTitle(title) {
    this._super(title);
    this.set('pageHeader.title', title);
  }
});

The page header service is then injected into a `page-header` component that uses `Ember.computed.readOnly` to read the title from the service. This little trick worked like a charm and allowed us to leverage this addon for more than just the document title. Now, we have a simple and easy solution for setting both our document and page titles via the same interface. I hope it works just as effectively for your applications as well!