Calling public methods on custom elements/ iron-pages in Polymer

Question

Calling a public method inside the my-app file of a basic Polymer starter kit resolves in a TypeError. Below is a example how I used to worke with public methods. But when I try to call a method on a custom element inside the iron-pages of the my-app file the code below is not working.

 <!--Script in parent file-->
 <script>
   toggleDialog: function() {
     this.$.myDialog.toggleDialog();
   }
 </script>

 <!--Script in Child-->
 <script>
   toggleDialog: function () {
      this.$.popUp.toggle();
   }
 </script>

The following simplified code creates the error. I am checking with attributeChanged if the my-singlevideo page is selected. If so I am trying to call the public method callFunction.

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

    <app-location route="{{route}}"></app-location>
    <app-route
     route="{{route}}"
     pattern="/:page"
     data="{{routeData}}"
     tail="{{subroute}}"></app-route>

    <iron-pages
     selected="[[page]]"
     attr-for-selected="name"
     fallback-selection="404"
     role="main">
      <my-dashboard name="dashboard"></my-dashboard>
      <my-profile name="profile"></my-profile>
      <my-singlevideo name="singlevideo" id="singlevideo"></my-singlevideo>
    </iron-pages>

  </template>

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

      properties: {
        page: {
          type: String,
          reflectToAttribute: true,
          observer: '_pageChanged'
        },
      },

      observers: [
        '_routePageChanged(routeData.page)'
      ],

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

      _routePageChanged: function(page) {
        this.page = page || 'dashboard';
      },

      attributeChanged: function(name, type) {      
        if(this.getAttribute(name) == 'singlevideo') {
          this.$.singlevideo.callFunction();
        }
      },

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

What error are you getting? Also, try and add break points to check the navitagion — a1626
I don't get any errors when my btn int he toolbar is pressed it get a console.log but the public method never reaches the page. — Niklas
I am having the same problem than you. I believe this actually worked, about 1 year ago. Maybe Polymer changed something in the meantime. — yglodt
It's been a few years and if I look back at this question I could assume that the iron-pages element was keeping my function call to reach its target in one of the child components. I can't recall if I was using any lazyloading which could have resulted in the element not being present when selecting it to call. — Niklas

Supersharp Supersharp · Accepted Answer · 2016-10-08T19:30:45

If the page you want to reach (<my-student-search>) is unique in the main document, you can use the standard document.querySelector() method to get the custom element:

var comp = document.querySelector( 'my-student-search' )

Alternately, you can query it it by id:

var comp = document.querySelector( 'my-student-search#theId' )

Then call it public method on it:

comp.changeContent()

Calling public methods on custom elements/ iron-pages in Polymer

1 Answers