Issue with integrating Bootstrap 4 toolkit within Angular ngFor causing unexpected behavior

I have encountered a peculiar problem with the bootstrap toolkit while using it inside ngFor. When I hover, there is a delay in displaying the toolkit title and the CSS does not seem to be applied correctly. This issue is illustrated in the screenshot provided. Interestingly, when the toolkit is placed outside of ngFor, it functions as expected without any glitches.

https://i.sstatic.net/9pkNE.png

Below is my code snippet .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>
cssangularbootstrap-4angular5

Answer №1

*ngFor is a structural directive that dynamically creates HTML DOM elements based on the available data. It is recommended to avoid using jQuery and instead utilize the Angular Bootstrap library for better functionality.

However, if you do need to use jQuery, ensure that you execute the jQuery method only after the *ngFor has finished rendering all the items in the list.

code.ts

ngOnInit(): void {
// At this stage in ngOnInit, no elements are present in the DOM yet
// Remove the jQuery code 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 the list is populated in the HTML, you can execute the jQuery code
    // Since there might be a slight delay between fetching data and rendering it in the HTML, you can use a small setTimeout hack even though it's not ideal
    setTimeout(()=>{
      jQuery(function() {
        (jQuery('[data-toggle="tooltip"]') as any).tooltip();
      });
    },500);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular is throwing an error with code TS2322 stating that a number cannot be assigned to a string type

While trying to convert a PHP variable gender from string to number, I ran into the following error: Error TS2322: Type 'number' is not assignable to type 'string' in Angular Here's the code snippet: param = { id: '&ap ...

angular

What is the best way to align the <text> element within an SVG's parent <g> element?

I'm currently developing a booking tool that requires users to choose a desk on the map by clicking on it. Each desk is enclosed in its own group (<g>) with specific elements like <title>, <path>, and <text>. The issue I' ...

htmlcsssvg

Eliminate extra space beside the dark column on the right side in Bootstrap 4

For some time now, I've been struggling with an issue related to the left sidebar. When the sidebar is absent, the white space on the right disappears. I've tried various suggestions from others but none seem to solve the problem. I'm unsure ...

htmlcssbootstrap-4navbarnav

Terminal throws an error stating that no default engine was specified and no extension was provided

I have been working on executing a backend program in Node.js using MongoDB. I have created a form with two input fields for password and name. I am not utilizing any HBS or EJS and my VS Code terminal is displaying the following error: No default engine ...

javascripthtmlcssnode.jsmongodb

Creating colorful containers using Bootstrap

Hey there, I am interested in creating small colored boxes to represent different meanings for each color. I came across this code snippet but I am unsure how to adjust the size: <div class="p-3 mb-2 bg-primary text-white">.bg-primary</d ...

htmlcssbootstrap-4

Eliminating a line break that appears after incorporating a list into a paragraph

Currently, I am in the process of developing a website where I need to input information. To display this information, I decided to use a list within a paragraph. However, I noticed that after the list name, the text moves to another line which is not wh ...

htmlcss

Can you guide me on how to programmatically set an option in an Angular 5 Material Select dropdown (mat-select) using typescript code?

I am currently working on implementing an Angular 5 Material Data Table with two filter options. One filter is a text input, while the other is a dropdown selection to filter based on a specific field value. The dropdown is implemented using a "mat-select" ...

javascripthtmlangulartypescript

Tips for aligning the elements in the navigation bar in the center

I am faced with a dilemma regarding my navbar design. Here is an image of my current navbar layout: I am attempting to align the components within the navbar to resemble the following design: Here is the HTML code I am using: <!-- Navbar --> < ...

htmlcsslaravelbootstrap-4navbar

Utilizing Selenium with Python to choose a specific option from a dropdown selection

I am currently experimenting with using Selenium in Python to choose the option "Custom date" from the dropdown menu displayed in the image below: https://i.sstatic.net/ASHU2.png The hierarchy of divs is structured as shown here: https://i.sstatic.net/xtA ...

javascriptpythonhtmlcssselenium

Angular 6 and Bootstrap 4 Collaborate for a Dynamic Multi-Level NavBar

(UPDATE: Issue Resolved - I discovered that I needed to include the JavaScript within $(document).ready(function()), which was previously missing. The example below worked perfectly for me.) I am attempting to implement a Multi-Level Navbar with Angular 6 ...

cssangularbootstrap-4navbar

Transforming HTML 'img' elements into React components without losing styling: How do I achieve this with html-to-react?

I am seeking guidance regarding the usage of the html-to-react library. Consider the following html string: '<div> <img src="test.png" style="width: 100px;"/> <img src="test2.png" style="margin: 0px 4px;"/> </div>' ...

javascripthtmlcssreactjs

The Next.js application is unable to load the combined CSS from a React Component Toolkit

My React components repository includes individual .css files for each component which are imported into the respective components. These components are then bundled using a rollup configuration and published as an NPM package, with all component CSS being ...

cssreactjswebpacknext.jsrollup

I am experiencing difficulty in integrating Shopify buy buttons with the bootstrap grid system

Currently, I am facing an issue where I am attempting to showcase a group of 4 Shopify buy buttons side by side within a Bootstrap grid system. However, despite my efforts, they do not align horizontally as intended. Below is a snippet of the code: <di ...

bootstrap-4

Why isn't the float left property working as expected?

Why won't my image float to the left? I'm using a class called align-left with float: left but it's not working. You can see the live version at - (check out the review grid halfway down under the heading 'High customer satisfaction r ...

htmlcss

The Angular component exported from one module cannot be utilized in a different module

Why am I unable to use a custom component exported in my AppModule within another module that is imported into the AppModule? Isn't an exported component supposed to be visible globally? I am attempting to utilize the CalendarComponent with the selec ...

angularangular-componentsangular-module

Ways to effectively incorporate Bootstrap into Lit?

Currently, I am in the process of converting a website from Polymer to Lit. I have made good progress with it, but I have encountered a roadblock when it comes to styling. In order to simplify development and focus on functionality, I have been following t ...

javascriptcssbootstrap-5masonrylit

Ways to extract a specific value from a geojson object using the key name

After making a call to the back-end, I retrieved the below geojson data in the 'data' object. However, when trying to access the values of the 'type' and 'features' keys within the geojson, I encountered difficulties. data["g ...

javascriptjsonangulargeojson

Modify the height of an element in real-time using jQuery

I'm looking to dynamically adjust the height of a div based on another element, but only if that element does not have the class collapsed (which is used in a Bootstrap toggle collapse feature). The initial setup seems to work fine, however, when I i ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to incorporate a variety of colors into a single element?

Using a combination of colors in one element I'm looking for ways to incorporate multiple colors into a single element effectively. My initial attempt with the color mix function didn't work as expected, so I need new ideas and techniques on how ...

htmlcsslinear-gradients

How can you programmatically toggle the visibility of a material table footer?

Is it possible to control the visibility of the material table footer using an @Input() variable? I am working on a custom table component that may or may not need a footer, like this <my-component [showFooter]="false"></my-component> My init ...

angularangular-material