javascript - When an Angular 2 component has fully loaded

I cannot seem to find a hook by which I can know that a ponent that is made up of other child ponents has pletely 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.

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

Any suggestion is highly appreciated.

Share Improve this question asked May 22, 2016 at 12:15 lbrahim 3,81012 gold badges59 silver badges98 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 4

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

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

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);
}

Building on Dimitri's answer, I've found that even after ngAfterViewInit is called, some elements were still not pletely loaded, in my case I was after the scrollHeight of an element.

Using Ionic's platform.ready() and some timeout-testing, I noticed content finally being instantiated after about 60ms, so I increased it to 250ms just provide some wiggle-room. It's really not ideal but it's the last lifecycle hook to perform checks... but maybe it'll help someone?

constructor(public platform: Platform) {}

ngAfterViewInit() {
    this.platform.ready().then(() => {
        /* still returns 0 here */
        console.log(this.el.nativeElement.scrollHeight);

        setTimeout(() => {
            /* returns x here */
            console.log(this.el.nativeElement.scrollHeight);
        }, 250);
    });
}

I know not everyone'll be using Ionic to have the Platform class available, it was only relevant to my use case as I was using ion-icons. But I left it in, in case it helps another Ionic user or something...

Question being asked for Angular2... but these hooks are still in action on 1st Jan 2024.

ngAfterViewInit is the one mostly heared about, but if you are looking for a hook that register the event of all the templates getting finally rendered then ngAfterViewChecked is something you are looking for.

There are couple of more hooks including ngAfterContentInit and ngAfterContentChecked which can be explored here https://angular.io/guide/lifecycle-hooks.

Hope this helps, cheers!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - When an Angular 2 component has fully loaded - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)