Setting document title in the application route

application.js

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default Route.extend({
  currentUser: service(),
  router: service(),

  init() {
    this._super();
    this.setDocumentTitle();

  },
  
  setDocumentTitle() {
    this.router.on('routeDidChange', (transition) => {
      let toRouteName = transition.to.name;
      let pageTitles = {
        'bands.index': () => {
          return 'Bands';
        },
        'bands.band.songs': () => {
          let bandRouteInfo = transition.to.find(info => info.name.includes('bands.band'));
          let bandId = bandRouteInfo.params.id;
          let band = this.store.peekRecord('band', bandId);
          let name = capitalizeWords(band.name);
          return `${name} songs`;
        }
      }
      let titleSegments = [];
      let titleSetter = pageTitles[toRouteName];
      if (titleSetter) {
        titleSegments.push(titleSetter());
      }
      titleSegments.push('Rock and Roll with Ember.js');
      document.title = titleSegments.join(' - ');
    });
  }
});