Hey, all. I’m new to Angular, but not to development in general having been around in my field (backend engineer) for decades.
I generally use Bootstrap on the frontend, but recently picked up Angular to try, and I am looking to incorporate some Bootstrap components into Angular. I just came across a situation where I’d like to include a Bootstrap Tooltip component multiple times on a form, but I’m having an issue in knowing where to include the code.
Bootstrap Tooltip components need to be registered on page load, with something like
const tooltipTriggerList = document.querySelectorAll(‘[data-bs-toggle=”tooltip”]’);
[…tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
I created a separate JS file, included it in my angular.json file, and do see the contents loaded (wrapped in a function) in the browser sources, so I know that is getting loaded. If I wrap the code in an event handler for document load though, nothing happens (I put a console.log() in there).
I’m not actually sure if this is even the right way, but I also tried to import the Tootip class into my app component, but it never seems to find it. My thought there was doing something like
import { Tootltip } from ‘path to bootstrap tooltip class’
So, is it better to load in an external JS file, or integrate in my app component, and how is this (either) acheived?
Thanks for helping out an Angular noob.
Paul.
