Binding Angular Object to Polymer 1.0

Question

I have an custom element:

<my-element options='{{myOptions}}'></my-element>

Like this, the ready callback in the web component just receives {{myOptions}} for the options property. I've tried some tools, none worked.

I then read here that you can do a callback that will trigger once the property was changed (attributeChangedCallback), so I did some hack that postpones the ready callback until a boolean flag is set to true on that callback, but that's an ugly fix.

Also - it only works with Chrome.

Can someone share what's the best cross-browser solution to make the Angular bind to Polymer ?

Answer 1

<my-element options='{{myOptions}}'></my-element> binds myOptions stringyfied, for object binding use

<my-element [options]='myOptions'></my-element>

To make Polymer awar of later changes to a property of myOptions you can delay the assignment of the value to myOptions until it is fully built on the Angular side. If you pass an object and change a property of that object, Angular doesn't recognize it.

You could also explicitly notify the Polymer element about the change using Polymers API

@Component({
  selector: 'angular-comp',
  template: `
<my-element #options options='{{myOptions}}'></my-element>
`
export class AngularComponent {
  @ViewChild('options') options;

  constructor() {
    this.options = {};
  }
  myOptions:any;
  // or some event handler or similar that isn't called before ngAfterViewInit (for example click, ...)
  ngAfterViewInit() { 
    this.options.someProp = "someValue";
    options.set('options.someProp', this.options.someProp);
  }
}