Issue
I’m hoping someone can steer me on the right direction. I embedded a polymer component inside an Angular component. I would like to call a method from this polymer component from the angular component class. Is this possible, if yes how would you go about doing this? querySelector has not proven successful.
ang_comp.html:
<div id='ilovePolymer'>
<bwu-grid id='polymerGrid'></bwu-grid>
</div>
ang_comp.dart:
@Component(selector: 'ang-comp', templateUrl:'ang_comp.html')
class AngularComp {
......//All the goodness
querySelector('#ilovePolymer') returns me null here.
querySelector('ang-comp').shadowRoot returns nothing
querySelector('bwu-grid') returns nothing.
I’m using Angular 1.0.0, Polymer 0.15.1+5
Solution
Thank you Ozan. That was a good suggestion, here is how I fixed it:
- Make sure you add
useShadowDom: true
to the component properties. - The Angular component class implements
shadowRootAware
- override
onShadowRoot
with the@override
meta.
My example class:
@Component(selector: 'ang-comp', templateUrl:'ang_comp.html', useShadowRoot: true)
class AngularComp implements ShadowRootAware {
... //some other stuff...
@override
onShadowRoot(ShadowRoot sr){
print(sr.querySelector('#polymerGrid') is bwu-grid); //This returns True! Yey!!
}
}
By the way, your could also use AttachAware
if you want to capture something during attach
.
Answered By – Alex L.
Answer Checked By – Robin (FlutterFixes Admin)