my-app is a custom element which contains two other custom elements that need to communicate with each other. When i click a button on the the header element I want the drawer element to open/close. I am trying to use data-binding for messaging but i am unable to get it to work.
I think I might have to use iron-signals for this but I would like to know why data-binding does not work in this condition.
Parent Element - my-app
<dom-module id="my-app">
<template>
<app-header-layout has-scrolling-region>
<my-header drawer-active="{{drawerState}}"></my-header>
<div id="main-content" class="">
<div class="imgWrap"><img src="../images/banner.jpg"></img>
</div>
</div>
<my-drawer drawer-opened="{{drawerState}}"></my-drawer>
</app-header-layout>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
drawerState: {
type: Boolean,
value: false,
notify: true
}
}
});
</script>
</dom-module>
Child Element - my-header
<dom-module id="my-header">
<template>
<app-header>
<app-toolbar>
<div class="logo"><img src="../images/logo.svg"></img>
</div>
<paper-icon-button icon="menu" on-tap="toggleDrawer"></paper-icon-button>
</app-toolbar>
</app-header>
</template>
<script>
Polymer({
is: 'my-header',
properties: {
drawerActive: {
type: Boolean,
value: false,
notify: true
}
},
toggleDrawer: function() {
this.drawerActive = !this.drawerActive;
}
});
</script>
</dom-module>
Child Element - my-drawer
<dom-module id="my-drawer">
<template>
<app-drawer align="end" opened="{{drawerOpened}}">
<paper-menu> ... </paper-menu>
</app-drawer>
</template>
<script>
Polymer({
is: 'my-drawer',
properties: {
drawerOpened: {
type: Boolean,
value: false,
notify: true
}
}
});
</script>
</dom-module>
The issue was resolved. There was an import error on my part. See comments on the question.