CODEWITHSUNDEEP
polymerpolymer-1.0
Rhys
Rhys

Reputation: 489

Polymer two drawer inside component

I am using the example code for two drawers found here.

<app-drawer-layout>

  <app-drawer swipe-open></app-drawer>

  <app-drawer id="endDrawer" align="end" swipe-open></app-drawer>

  <app-toolbar>
    <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
    <div main-title></div>
    <paper-icon-button icon="info" onclick="document.getElementById('endDrawer').toggle();"></paper-icon-button>
  </app-toolbar>

  <sample-content size="100"></sample-content>

</app-drawer-layout>

This works if I put the code on in index.html but If I put it inside a component, and then reference the component in index.html, I get the following error:

Uncaught TypeError: Cannot read property 'toggle' of null

Can anyone please shed some light on this?

Note: This error happens in Chrome but not Safari. Haven't tested anything else.

Upvotes: 1

Views: 130

Answers (1)

Tomasz Pluskiewicz
Tomasz Pluskiewicz

Reputation: 3662

This happens because inside a component code the document.getElementById will not work as expected. Do you have Shadow DOM enabled by any chance?

You should use Polymer's event binding syntax and get the element using the node finding feature.

<dom-module id="my-app">
  </template>
    <paper-icon-button icon="info" on-tap="toggleEndDrawer"></paper-icon-button>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-app',

    toggleEndDrawer: function() {
      this.$.endDrawer.toggle();
    }
</script>

Upvotes: 1

Related Questions