Polymer - Dynamic page title with app-header

I'm using the app-drawer-layout from Polymer App Toolbox, and instead of having a fixed title in <div main-title>My App</div>, I'd like to have it work dynamically with the iron-pages-navigation.

Ideally I'd like to specify the title in each element loaded in iron-pages, but defining it in the navigation is also a solution. However, I'm kinda stuck as none of the attempts I've made seems to work.

My code looks like this:

<app-header condenses fixed effects="waterfall">
  <app-toolbar>
    <paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button>
    <div main-title>My App</div>
  </app-toolbar>
</app-header>

<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
  <moso-profile name="profile"></moso-profile>
  <moso-resume name="resume"></moso-resume>
  <moso-portfolio name="portfolio"></moso-portfolio>
  <moso-contact name="contact"></moso-contact>
</iron-pages>

Now, I've tried using the <content select=".page-title"></content> (Polymer Docs) and then have a <div class="page-title">New title</div> in each loaded element. Didn't work.

I've also tried adding a title attribute to each element in iron-pages (like so: <moso-profile title="Profile" name="profile"></moso-profile>) and then try to one/two way bind it with [[page.title]], no luck either.

Am I doing something wrong? Or is it not possible anymore?

Solution

Why not something like this?

<app-header condenses fixed effects="waterfall">
  <app-toolbar>
    <paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button>
    <div main-title>{{page}}</div>
  </app-toolbar>
</app-header>

<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
  <moso-profile name="profile"></moso-profile>
  <moso-resume name="resume"></moso-resume>
  <moso-portfolio name="portfolio"></moso-portfolio>
  <moso-contact name="contact"></moso-contact>
</iron-pages>

or if you want to control the title even more you can use a computed function:

<app-header condenses fixed effects="waterfall">
  <app-toolbar>
    <paper-icon-button icon="mdi:menu" drawer-toggle></paper-icon-button>
    <div main-title>{{_computeTitle(page)}}</div>
  </app-toolbar>
</app-header>

and in javascript:

_computeTitle: function(page) {
    if (page == 'profile') {
        return 'My Profile';
    }
    ...
}