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

One possible solution would be subscribing on zone.onStable or zone.onMicrotaskEmpty

ngAfterViewInit() {
  this.zone.onStable.first().subscribe(() => {
    debugger;
  });
}

or

ngOnInit() {
  this.service.getData().subscribe(() => {
    this.data = data;
    this.zone.onMicrotaskEmpty.first().subscribe((data) => {
      $(someElem).plugin();
    });
  });
}

See also

• Angular 2 calling jQuery after rendering elements - after consuming API