Polymer inter-component data binding?

Question

I have a login component, and I'd like to make the login status available for other components in my application.

Can anyone provide working code or examples?

I need some sort of binding or eventing at least, so that when the login status changes, the UI of these other interested components can be updated accordingly.

Answer 1

Create a property that represents the status in your login component and set notify: true. Use data-binding in your login component and any other components that use that status.

<login-component status="{{status}}"></login-component>
<other-component login="{{status}}"></other-component>

If you use your components outside of a Polymer template, make use of autobind by wrapping them in a <template is="dom-bind">.

<template is="dom-bind">
    <login-component status="{{status}}"></login-component>
    <other-component login="{{status}}"></other-component>
</template>