When an Angular 2 component has fully loaded

Question

I cannot seem to find a hook by which I can know that a component that is made up of other child components has completely finished loading including data-binding and everything. For example take the following template for ParentComponent:

<div>
    <child-one>
        {{textOne}}
    </child-one>
    <child-two>
        {{textTwo}}
    </child-two>
</div>

Any suggestion is highly appreciated.

Answer 1

It's wrong! ngAfterViewInit is fired when the view is being initialized... Put a breakpoint into it and you will see. A hook to know when the view is actually fully loaded is really missing for Angular 2! But as a workaround you could try something like that:

ngAfterViewInit() {
    console.log('View is being initialized');
    console.log(this.el.nativeElement.offsetHeight);

    setTimeout(() => {
        console.log('View is fully loaded');
        console.log(this.el.nativeElement.offsetHeight);
    }, 0);
}