Bootstrap 4 toolkit not working properly inside angular ngFor

0
votes

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.

enter image description here

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>&nbsp;</span>
            </div>
1
cssangularbootstrap-4angular5
The first thing you need to do is remove all JQuery code from your angular application. You can use packages like ngx-bootstrap to achieve this without JQuery - Owen Kelvin
I did try removing jQuery but then the tooltip wasn't working properly outside ngFor also. It takes time to display the tooltip title on hover and CSS doesn't get applied. Same as the screenshot above. And I have to stick to bootstrap. - pratik jaiswal
Another most closer to bootstrap is ng-bootstrap:ng-bootstrap.github.io/#/home - Eliseo

1 Answers

1
votes

*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);
}