Angular2 Dialog Callback

Question

All, I have an Angular2 application. In this application I have a button that opens a dialog. In this dialog is a single div which I need to act on. Is there any way to execute code in a callback after the dialog and all it's children have been created?

The closest I've got is

<modal #openDialog (focusin)="openExplorer('someData')">
...
</modal>

If I go with that approach then my code get's rexecuted if a user clicks on the form fields inside of this div.

// HTML
<p (click)="openTheDialog(openDialog, 'thisDivRightHere')">Click here to open me, fool</p>
<modal #openDialog (focusin)="openExplorer('someData')">
    <div id="thisDivRightHere"></div>
</modal>

// Component
openTheDialog(dlg, someDiv) void: {
    this.fooBarService.preformTheAction(someDiv);
}

// Service
preformTheAction = function(someDiv) {
    $('#' + someDiv).html(new Date());
}

In the above example, without (focusin) then I can't get a handle on "thisDivRightHere"

But if I use (focusin) I can but the date changes every time somethings interacted with.

Answer 1

I solved it by using setTimeout to wait for the element and a carefully placed callback

// HTML
<p (click)="openTheDialog(openDialog)">Click here to open me, fool</p>
<modal #openDialog (onOpen)="openIt(openDialog, 'thisDivRightHere')" >
    <div id="thisDivRightHere"></div>
</modal>

tester(someDiv, dialog, callback): void {
    var checkExist = setInterval(function() {
        if ($('#'+someDiv).length) {
            console.log("Exists!");
            clearInterval(checkExist);
            callback(dialog);
        }
    }, 100); // check every 100ms
}    

// Component
openTheDialog(dlg) {
   dlg.open();
}

openIt(dlg, someDiv) void: {
    this.tester(someDiv, this.myService, function(dlg) {
        dialog.preformTheAction(someDiv);
    });
}

// Service
preformTheAction = function(someDiv) {
    $('#' + someDiv).html(new Date());
}