As per the guidelines provided at https://angular.io/docs/ts/latest/guide/webpack.html, it is recommended to include vendors like jQuery in the vendor.ts file.
// Other vendors for instance jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...
This is my current approach:
typings install dt~jquery --global --save
npm install jquery --save
In addition, I inserted the following line into vendor.ts:
import 'jquery'
Although webpack runs without any errors, I am facing issues while trying to utilize jQuery in my Component.
import { Component, OnInit, ElementRef } from '@angular/core';
@Component({
selector: 'table-widget',
templateUrl: 'table-widget.component.html'
})
export class TableWidgetComponent implements OnInit {
constructor(private _elRef: ElementRef) {
}
ngOnInit(): void {
$(this._elRef.nativeElement).find('button').on('click', function() { alert("it works"); });
}
}
What could possibly be the mistake in my implementation?