How to run a jquery function in Angular 2 after every component finish loading

Question

I have tried all the life cycle hooks but can\'t get to accomplish the needed result. The result that I need is triggering a function that initialize many jquery plugins us

Answer 1

The most effective way that I have found is to use setTimeout with time of 0 inside of the page/component constructor. This let's the jQuery run in the next execution cycle after Angular has finished loading all the child components.

export class HomePage {
    constructor() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}

Putting the setTimeout inside of ngOnInit method has also worked for me.

export class HomePage {
    ngOnInit() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}