When an Angular 2 component has fully loaded

Issue

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.

Solution

When ngAfterViewInit() {} was called or if content is passed (<ng-content>), after ngAfterContentInit() was called.

---

• ngAfterViewInit() is called after the view initialization is completed. The component is fully loaded and initialized at this state.
• If also children passed to the component should be fully loaded then use ngAfterContentInit() instead.

Answered By - Günter Zöchbauer