Event when an Component is added to the dom

Question

Say I have a AngularDart component that adds a div and an iframe to that div as it's template.

I have the element passed for the outer component in the components constructor

@Component(
    selector: "input-html",
    templateUrl: "packages/myproject/components/inputs/html.html",
    useShadowDom: false
)
class HtmlComponent implements ShadowRootAware {

    HtmlComponent(NgModel ngModel, Element element):super(ngModel, element){
    } 
}

I have shadowdom turned off because I'm using Bootstrap for styling and want the elements easily accessible for the bootstrap css.

My template code is along the lines of

 <div>
      <iframe id="my-iframe"></iframe>
 </div>

It's more complicated than that, there's a bunch of buttons etc, as I'm porting a javascript html editor to angulardart.

My problem is, I need to get the iframe element, but whenever I query element.querySelector("#my-iframe") or even window.document.querySelector("#my-iframe") the object is null. I believe this is because the template hasn't been added to the DOM yet.

I need the iframe object because I need to set the iframe content for the HTML editor to work. There's a few other areas of my project that I wanted to get the template dom objects but couldn't either.

I've tried onShadowRoot, which worked in AngularDart 0.14 but no longer works in 1.0. I've tried ScopeAware and querying for the iframe when the scope is set, but that didn't work (ScopeAware fires before shadowroot event).

I have a hack that's messy that works, by using ng-show="init()" and in that init method I have

bool _initDone = false;
bool init() { 
    if(_initDone == false) {
        iframe = element.querySelector("#my-iframe")
        _initDone = true;
    }
    return true;
}

Which works, but it's messy and I don't like that solution and obviously isn't the correct way to do it.

Anyone know how I can achieve this in AngularDart 1.0?

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2014-12-04T14:12:19

I think onShadowRoot is the right place for the code to query the element. If it really doesn't work wrap it in a Future to add it as a task at the end of the event queue to delay it a bit more.

onShadowRoot() {
  new Future(() {
    querySelector(...);
  });
}

Event when an Component is added to the dom

1 Answers