My solution involved the creation of a custom directive.
import { Directive, OnInit, Inject, ElementRef } from '@angular/core';
import { JQUERY_TOKEN } from './jquery.service';
@Directive({
selector: '[data-toggle="tooltip"]'
})
export class TooltipDirective implements OnInit {
private el: HTMLElement;
constructor(elRef: ElementRef, @Inject(JQUERY_TOKEN) private $: JQueryStatic) {
this.el = elRef.nativeElement;
}
ngOnInit() {
this.$(this.el).tooltip();
}
}
The jquery.service file is referenced in the import statement above.
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken<JQueryStatic>('jQuery');
Afterwards, it needs to be added to the module like so:
import { NgModule } from '@angular/core';
import { TooltipDirective } from './tooltip.directive';
import { JQUERY_TOKEN } from './jquery.service';
export let jQuery: JQueryStatic = window['jQuery'];
@NgModule({
imports: [
// ...
],
declarations: [
TooltipDirective
],
providers: [
{ provide: JQUERY_TOKEN, useValue: jQuery }
]
})
export class MyModule {}
Finally, include the directive in the desired component. For example, by adding one line in the app.component.ts file:
import { TooltipDirective } from './tooltip.directive';