How to fire an event whenever `<my-view#>` is active (i.e. comes into view)?

Using Polymer Starter Kit as an example, I would like to have different <app-toolbar> in <my-app> (using property headerType) based on different <my-view#>, i.e.

<my-view1> => headerType = 'my-view1-header'
<my-view2> => headerType = 'my-view2-header'

In my <my-app>, I have created a property headerType and use <dom-if> to show/hide different <app-toolbar>.

My question is how would I always fire an event to <my-app> and set headerType = my-view#-header whenever <my-view#> is active (i.e. comes into view).

I have tried the polymer lifecycle, such as ready(), attached(), etc, and I understand they are only trigger during dom-related events.

I eventually use the _pageChanged observer to call a function on <my-view#>. Below are the snippet of the code.

_pageChanged: function(page) {
  let onLoad = function () {
    let selected = this.$.ironpages.children[page];

    if (Object.getPrototypeOf(selected).hasOwnProperty('viewSelected')) {
      selected.viewSelected();
    }
  }

  // Load page import on demand. Show 404 page if fails
  var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
  this.importHref(resolvedPageUrl, onLoad, this._showPage404, true);
},