Bootstrap 4 toolkit not working properly inside angular ngFor - css

Question

I am having a strange issue with the bootstrap toolkit inside ngFor. On hover, it is taking some time to display the toolkit title and CSS is not getting applied. Please find the screenshot for the same. And if the toolkit is used outside ngFor, it works fine. It works normally.
Here is my code
.ts
ngOnInit(): void {
jQuery(function() {
(jQuery('[data-toggle="tooltip"]') as any).tooltip();
});
this.getGroupsForBox();
}
async getGroupsForBox() {
this.groups = await this.boxManagementService.findGroupsOfBox(this.hub.id);
}
.html
<div *ngFor="let group of groups">
<span
class="badge badge-info"
data-toggle="tooltip"
data-placement="bottom"
title="{{ group.GroupDescription }}"
>{{ group.GroupName }}</span
>
<span> </span>
</div>

Answer 1

*ngFor is structural directive, it creates html DOM on the fly when get the data. That's how it work, ideally you should get ride of jQuery and use the angular bootstrap library.
How ever you can achieve that, you just need to make sure to execute jQuery method after that *ngFor completed the rendering off all the items in the list. Than only you should do that.
code.ts
ngOnInit(): void {
// right now in ngOnInit, nothing is there in the DOM it doesn't applied to that
// Remove this from here.
// jQuery(function() {
// (jQuery('[data-toggle="tooltip"]') as any).tooltip();
// });
this.getGroupsForBox();
}
async getGroupsForBox() {
this.groups = await this.boxManagementService.findGroupsOfBox(this.hub.id);
// once you know list are populated in html then do that part
// getting the data in TS and rendering in html there will be time difference in ms, use small hack of setTimeout not ideal not recommended but it will do the job
setTimeout(()=>{
jQuery(function() {
(jQuery('[data-toggle="tooltip"]') as any).tooltip();
});
},500);
}