Toggle paper-dialog which is in a custom element Polymer

Question

I am fairly new when it comes to developing with Polymer and JavaScript and I have the feeling that the way I toggle my paper-dialog is not the nicest way or could be improved. Currently I try to call the toggle() function from outside of the custom element, It works for me although I am getting an error
I created a Custom Element called my-dialog:

<dom-module id="my-dialog">
  <template>
    <style>
      :host {
        display: inline-block;
      }
    </style>

    <paper-dialog id="popUp" with-backdrop on-iron-overlay-opened="patchOverlay">
      <!-- Dialog content -->
      <h2>Hello World</h2>
    </paper-dialog>

  </template>

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

    });
  </script>
</dom-module>

From one of my pages I now want to open and close the dialog when clicked on a paper button.It works fine but as i mentioned above I have the feeling that this is not really professional what I am doing there.

<dom-module id="my-profile-view">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <paper-fab icon="create" id="myBtn" on-tap="toggleDialog"></paper-fab>        
    <my-dialog id="myDialog"></my-dialog>

  </template>

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

      //Open dialog
      toggleDialog: function() {
        var dialog = this.shadowRoot.querySelector('#myDialog');
        var popUp = dialog.shadowRoot.querySelector('paper-dialog');
        popUp.toggle();
      },
    });
  </script>
</dom-module>

The error msg. I am getting in my console:

(program):5 Uncaught TypeError: Cannot read property 'removeAttribute' of null(anonymous function) @ (program):5(anonymous function) @ (program):20

Would be great if someone could clear things up for me. And maybe give me a hint what i could do else.

You should add a method to you first custom element `my-dialog` and call `toggle()` from here. — Supersharp, Aug 30 '16 at 15:28
but the method gets tricked from the fab in my-profile-view can you define your answer a bit more?! — Niklas, Aug 30 '16 at 16:23
The error msg. above is apparently a conflict with the Chrome ADBlock http://stackoverflow.com/questions/38143879/cannot-read-property-removeattribute-of-null-cant-find-source-of-it — Niklas, Sep 10 '16 at 10:22

score 2 · Accepted Answer · answered Aug 31 '16 at 21:31

Your second element my-profile-view should not know the inside logic of your first element my-dialog.

Instead your custome dialog should expose a public method (i.e. toggleDialog).

my-dialog.html <script>:

Polymer({
  is: 'my-dialog',
  toggleDialog: function () {
    this.$.popUp.toggle()
  }
});

This method could be called by your second element.

my-profile-view.html <script>:

Polymer({
  is: 'my-profile-view',
  //Open dialog
  toggleDialog: function() {
    this.$.myDialog.toggleDialog()
  }
});

That is what I was looking for. Thanks a lot for the explanation. — Niklas, Sep 04 '16 at 16:12

Toggle paper-dialog which is in a custom element Polymer

1 Answers1