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