title: Ember - Set a Dynamic Page Title per route
body: <p>I have set up my Ember app to use the pod structure. I've created a topbar-nav component which I display on the main page. In the topbar-nav component I have set up the page title, which I would like to set automatically per route so for the <strong>dashboard</strong> route the title should be Dashboard, for the <strong>dashboard/categories</strong> the title should be categories and so on. </p>
  
  <p>Here's my app structure:</p>
  
  <ul>
  <li>app
  
  <ul>
  <li>application</li>
  <li>components
  
  <ul>
  <li>topbar-nav</li>
  </ul></li>
  <li>dashboard</li>
  <li>categories</li>
  </ul></li>
  </ul>
  
  <p>The app router - router.js</p>
  
  <pre><code>import Ember from 'ember';
  import config from './config/environment';
  
  var Router = Ember.Router.extend({
    location: config.locationType
  });
  
  Router.map(function() {
    this.route('dashboard', function() {
      this.route('categories');
    });
  });
  
  export default Router;
  </code></pre>
  
  <p>And the templates:</p>
  
  <p>application/template.hbs</p>
  
  <pre><code>&lt;aside&gt;
      {{sidebar-nav}}
  &lt;/aside&gt;
  
  &lt;main&gt;
      &lt;header&gt;
          {{topbar-nav}}
      &lt;/header&gt;
  
      {{outlet}}
  &lt;/main&gt;
  </code></pre>
  
  <p>components/topbar-nav/template.hbs</p>
  
  <pre><code>&lt;nav class="topbar-nav"&gt;
      &lt;div class="text-center"&gt;
          &lt;h5 class="page-title"&gt;{{title}}&lt;/h5&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  
  {{yield}}
  </code></pre>
  
  <p>components/topbar-nav/component.js</p>
  
  <pre><code>import Ember from 'ember';
  
  export default Ember.Component.extend({
      title: 'Component title'
  });
  </code></pre>
  
  <p>As you can tell already the title I get rendered is '<strong>Component title</strong>'</p>
  
  <p>The most accurate answer I got by now is this one:</p>
  
  <p><a href="https://stackoverflow.com/questions/26588250/page-titles-in-application-template-per-route-whats-the-right-way-to-do-this">Ember dynamic titles</a></p>
  
  <p>though after trying a lot of different approaches I couldn't find a good solution.</p>
  
  <p>Is there a clean and easy way of doing this? Any ideas and solutions are much appreciated.</p>