typescript - Polymer/PolymerTS: Pass object to custom element -

i'm creating web app uses typescript instead of javascript see how typescript feels. learning polymer kill 2 birds 1 stone. working, i'm using polymerts work, , until point it's been working fine. however, i've hit barrier.

i have 2 elements, can call them 'my-foo' , 'my-bar':

<link rel="import" href="path/to/my-bar.html">  <dom-module id="my-foo">     <template>         <my-bar mybarproperty="{{myfooproperty}}"></my-bar>     </template> </dom-module> 

now value 'myfooproperty' value has been deserialized json custom typescript class. can properties display if data-bind them, e.g.

<h1>{{myfooproperty.name}}</h1> 

but passing second custom element not work, i.e. "mybarproperty" null or empty map. element loaded correctly (any html not data-specific loaded , displayed) value isn't set. insight on why is? maybe isn't possible?

relevant *.ts files:

my-foo.ts:

@component("my-foo") class myfoo extends polymer.base {     @property({ type: object, notify: true })     myfooproperty: any;      constructor() {         super();         apicallthatreturnspromise().then(value => {             this.myfooproperty = value;         });     } }  myfoo.register(); 

my-bar.ts:

@component("my-bar") class mybar extends polymer.base {     @property({ type: object, notify: true, value: function() { return {}; } })     mybarproperty: any; }  mybar.register(); 

edit 1: did see if not deserializing json , passing raw data fix problem, did not.

use my-bar-property.

source: https://www.polymer-project.org/1.0/docs/devguide/properties.html#property-name-mapping