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 used for different elements on a single page after every single one of these elements (components) is loaded.

So lets say that you have this structure.

Home Page Slider Widgets Product rotators ..etc

Every one of these elements has it's own component and all are children of the Home page parent component.

And what I need here is to know when all the children components and the parent component is loaded so I trigger one jquery function to initialize every plugin on the page.

Answer 1

You will want to use the "ngAfterViewInit" lifecycle hook, through importing AfterViewInit (https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview). You can use it as shown below:

Installation:

    tsd install jquery --save

or

    typings install dt~jquery --global --save

Utilization:

    import { Component, AfterViewInit } from '@angular/core';
    import * as $ from 'jquery';

    ngAfterViewInit() {
        this.doJqueryLoad();     
        this.doClassicLoad();

        $(this.el.nativeElement)
            .chosen()
            .on('change', (e, args) => {
                this.selectedValue = args.selected;
            });
    }

    doClassicLoad() {
      // A $( document ).ready() block.
      $( document ).ready(function() {
          console.log( "Unnecessary..." );
      });      
    }

    // You don't need to use document.ready... 
    doJqueryLoad() {
        console.log("Can use jquery without doing document.ready")
        var testDivCount = $('#testDiv').length;
        console.log("TestDivCount: ", testDivCount);
    }

Here is a plunker for an example: http://plnkr.co/edit/KweZYO9hk9Dz8pqDK77F?p=info

Answer 2

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

Answer 3

what about

bootstrap(...).then(x => {
  ...
})

otherwise I would assume ngAfterViewInit() of your root component to be a lifecycle hook that matches your requirement but you stated that you tested all already ...

update

bootstrap() or ngAfterViewInit() on the root component can only be used for the initial load. For later added components the ngAfterViewInit() of the added components can be used.

Answer 4

I had the same problem here. I found 2 solutions, even they are not the best:

1 - Implement afterViewChecked to check if jquery plugin is initiated and then use a variable to control its initialization. This is the hard way because afterViewChecked is called many times.

2 - I changed some elements to be hidden using hidden property instead of ngIf. With hidden I could initialize all the jquery plugins using afterViewInit and make they work even my objects are hidden.

setTimeout did not work when using ngIf. It triggers before the content is re-rendered.

Answer 5

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