Pass routing params to element

Question

The polymer-starter-kit uses a <section> when displaying routing params, like this:

<section data-route="user-info">
  <paper-material elevation="1">
    <h2 class="page-title">User: {{params.name}}</h2>
    <div>This is {{params.name}}'s section</div>
  </paper-material>
</section>

But I would like to pass the params.name data to an element, like this:

<notification-section params="{{params}}" data-route="notifications"></notification-section>

While I can pass the data to the element and stamp it out in its template there's no way for me to access to params variable from any lifecycle events (such as ready for example).

How can this be done?

Answer 1

You can access params from the "attached" callback like so

Polymer({
  is: 'notification-section',
  properties: {
    params: {
      type: Object,
    },
  },
  attached: function(e) {
    console.log('params', this.params);
  },
});

You can read more about the attached event here

I also have a working demo here