I'm attempting to activate Bootstrap 5.3 Tooltips within my Angular 17 application.
Within angular.json, I've added bootstrap.bundle.min.js, which includes PopperJS.
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
I am following the provided example code from Bootstrap's official documentation for enabling the tooltips: https://getbootstrap.com/docs/5.3/components/tooltips/#enable-tooltips
Their code is giving me an error on line 16 in my app.component.ts file...
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
title = 'identity-verification-ui';
onInit() {
const tooltipTriggerList = document.querySelectorAll(
'[data-bs-toggle="tooltip"]'
);
const tooltipList = [...tooltipTriggerList].map(
(tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl) // <-- line 16
);
}
}
The error reads as
Cannot find name 'bootstrap'. ts (2304)bootstrap class is not accessible from app.component.ts.
https://i.sstatic.net/9PMQrSKN.png
How can I make new bootstrap usable within app.component.ts? Is app.component.ts the correct location for enabling Bootstrap components throughout the entire app? Are there better alternatives?
I prefer not to include jQuery or use third-party npm packages.