Get access to dom via Angular2 Dart

Question

I'm trying to get access to the DOM in an Angular2 Dart project since I'm using a GUI library that is not Angular2 compatible.

The following code works 100% when called from a button click event:

Modal.use();
Modal carriersModal = new Modal(querySelector("div.select-carrier-modal"));
carriersModal.show();

I now want to access that same DOM, but package that inside a component:

@Component(
    selector: 'select-carrier',
    templateUrl: '../templates/select-carrier-component.html'
)
class SelectCarrierComponent implements AfterContentInit {

    ElementRef _el;

    SelectCarrierComponent(ElementRef el){
        this._el = el;
    }

    @override
    ngAfterContentInit( ) {
        Modal.use();
        Modal carriersModal = new Modal(this._el.nativeElement.querySelector("div.select-carrier-modal"));
        carriersModal.show();

    }    
}

Inside the angular2 component, print(this._el.nativeElement); prints out select-carrier. If I do this._el.nativeElement.querySelector on it, the result is null no matter what I put in there. If I call this._el.nativeElement.children, I get an empty list.

Weird thing is, calling new Modal(querySelector("div.select-carrier-modal")).show(); still works when called from a button click via another component, but I can't get it to work from inside the component.

@override
ngAfterContentInit( ) {

    print(querySelector("div.select-carrier-modal"));
    print((this._el.nativeElement as Element).innerHtml);
    print((this._el.nativeElement as Element).children);
    print((this._el.nativeElement as Element).nodes);

Simply prints out

null
<!--template bindings={}-->
[]
[template bindings={}]

Any idea how I get access to the DOM from inside the component so that I can wire in the Modal ?

Answer 1

I assume the GUI library needs more time to create the content and it's not yet available when ngAfterContentInit() is called.

This might work:

@override
ngAfterContentInit( ) {
  new Future.delayed(Duration.Zero, () {
    print(querySelector("div.select-carrier-modal"));
    print((this._el.nativeElement as Element).innerHtml);
    print((this._el.nativeElement as Element).children);
    print((this._el.nativeElement as Element).nodes);
  });
}