Search code examples
javascriptpolymer

Polymer: Calling elements property in main app page from one of its views

Im using polymer starter kit, and in my main page (my-app) i have a div element which is hidden, and which i want to display on click from one of the apps views. I used syntax this.$.elementId.style="display: block;" but it returns error element is not defined. Is there any way to reach this value from one of its views?

Solution

  • I don't know which version of polymer you are using, but this is the polymer 2.0 way of doing this. In order for an child element to communicate to the parent element, you need to use events. You need to dispatch an event within the view element and listen to the event in my-app element like this:

    view element method

    buttonClicked() {
    this.dispatchEvent(new CustomEvent('button-clicked'))
}

    my-app element

    <my-view on-button-clicked="hideDiv"></my-view>

    my-app element method

    hideDiv() {
    this.$.elementId.style.display = "hidden"
}