Issues arise when attempting to use Bootstrap Dropdowns with an Angular 8 component

I'm working on implementing a dropdown menu using the Bootstrap 4.3 class, but I'm encountering an issue where nothing happens after selecting an option. I am using Angular version 8.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
cssangulartypescriptbootstrap-4drop-down-menu

Answer №1

When incorporating Bootstrap into your Angular app, it is important to remember the dependencies - popper.js and jquery. Once you have installed Bootstrap, ensure to also install these dependencies and add them to your angular.json file under scripts (refer to the image below). The recommended compatible versions are [email protected] (which fixes dropdown issues) and [email protected]

The dependency for the dropdown functionality in Bootstrap is popper.js

https://i.sstatic.net/JWQu7.png

With this setup, the dropdown feature will function correctly. Even with newer versions such as 4.5.x of Bootstrap, there is no need to rely on additional third-party libraries or package managers. Thank you for referring to the sample markup provided from Bootstrap.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Answer №2

To create dropdown functionality in Bootstrap within Angular, it is advised not to use bootstrap.js & jquery.js. Instead, a dedicated library for integrating Bootstrap with Angular should be used. For detailed instructions on implementing dropdowns in Angular using this library, refer to this link

Here is an example of the relevant HTML code:

    <div ngbDropdown class="d-inline-block">
        <button class="btn btn-outline-primary" id="dropdownMenuButton" ngbDropdownToggle>Dropdown button</button>
        <div ngbDropdownMenu aria-labelledby="dropdownMenuButton">
          <button ngbDropdownItem>Action</button>
          <button ngbDropdownItem>Another Action</button>
          <button ngbDropdownItem>Something else here</button>
        </div>
      </div>

For a complete working demonstration, check out the following StackBlitz project

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

An issue has been identified: the element 'insight-dashboard-erneuerung-settings' is unrecognized during the implementation of lazy loading

I am currently working on implementing lazy loading for the Dashboard module in my Angular project, but I have run into an issue: When trying to use 'insight-dashboard', I am getting the error message 'is not a known element'. I have c ...

angularangularjswebpacklazy-loadingsingle-page-application

Angular 6: Taking the Input Value on a Journey

Exploring Angular 6, I came across this snippet of code: import { Component, OnInit } from '@angular/core' import { FormGroup, FormBuilder} from '@angular/forms'; @Component({ selector: 'app-form', templateUrl: &apos ...

angularangular6

Applying jQuery .animate() to elements without specifying position: absolute

My goal is to create a website where clicking on an image triggers a dropdown menu. The jQuery method I'm using is as follows: function main() { $('#arrow').click(function() { $('.hidden').animate({ top: &a ...

javascriptjqueryhtmlcss

Encountering difficulties when trying to launch angular4 application using ng serve

When trying to run the following command in my Angular 4 app: ng serve I encountered the following error message: This version of the CLI is only compatible with Angular version 2.3.1 or later. Please upgrade your Angular version by running: npm instal ...

node.jsangular

How to make background color transparent in CSS for Safari browser

Does anyone know how to make the background color transparent in Safari? Right now, my PNG file is showing with a white background instead of being transparent. I have attempted: background-color: transparent; background-color: rgba(255,255,255,0); appe ...

csssafari

Is it achievable to apply a shadow to a div using only CSS, or would images be required?

I am looking for a simple solution where the user can press something and see a shadow effect on a new div (div centered window) that appears on top of the entire page, maybe 1/4th in size. Can this be achieved using pure web-kit css? Or would a combinat ...

javascriptcsshtmlwebkit

Guide to Indicating an Icon in Front of an HTML Link and Emphasizing Both with Tap

When using an iOS UIWebview, I am facing the issue of needing to add an icon before standalone links that are within a locally loaded HTML file. In addition to adding the icon, I also need both the icon and link to be highlighted when tapped. The desired ...

htmlioscssobjective-cuiwebview

Facing issues using Angular 5 for PUT requests due to 401 errors

When attempting to update data using the PUT Method in my angular service and express routes, I encountered a 401 error. Here is my service code: //401 makeAdmin(_id) { this.loadToken() let headers = new Headers() headers.append('Authorization& ...

javascriptangularexpress

Unforeseen outcomes arise when toggling expansion in JavaScript

I have a pop-out div at the top of my page that expands and closes on toggle. Also, when I toggle the pop-out div, it changes the top position of another div (a side pop-out menu). The issue is that the side pop-out menu should only appear when clicking ...

javascripthtmlcss

Format six images in a horizontal row for desktop and ensure they resize appropriately for mobile viewing

I am looking to arrange images of different sizes in rows depending on the device orientation. For desktop, I want 6 images with proper margins, 2 images in a line for portrait, and 4 images for landscape orientation. Any extra images should be placed in a ...

csssassbootstrap-4

Problem with Jquery show/hide feature only resolved after refreshing the page

I built a checkout page that consists of three fieldsets with unique IDs - 1, 2, and 3. I want the page to initially display only fieldset 1 while hiding fieldsets 2 and 3. Here is the jQuery code I used: $(document).ready(function(){ $("#1").show(); ...

phpjavascriptjquerycss

Angular: the page continues to display outdated information after using router.navigate

My web app allows users to select products to purchase. They can pause the configuration process and resume it later. Currently, I am using localStorage to store information about the products and their prices. There is a page in my app that displays a ta ...

javascriptangular

Offspring element overrides styling of its parent

#popBox{ width:100%; height:100%; position:fixed; left:0; top:0; border-collapse:collapse; background:black; opacity:0.8; display:none; } <table id="popBox"> <tr> <td></td> <td></td> ...

htmlcss

Using string interpolation and fetching a random value from an enum: a comprehensive guide

My task is to create random offers with different attributes, one of which is the status of the offer as an enum. The status can be “NEW”, “FOR_SALE”, “SOLD”, “PAID”, “DELIVERED”, “CLOSED”, “EXPIRED”, or “WITHDRAWN”. I need ...

angulartypescriptenumsstring-interpolation

React slick slider not functioning properly with custom arrows

"I have encountered an issue while trying to implement multiple sliders in my component with custom arrows positioned below each carousel. Despite following the documentation meticulously, the arrows do not respond when clicked. What could possibly be ...

reactjstypescriptnext.jscomponentsslider

Menu options disappearing upon clicking within the container area

Every time I click inside the dropdown menus, they unexpectedly close. This issue is persistent in both the Login menu and the nav bar. Although I’m not a seasoned web developer, I suspect it’s just a simple error that I’ve been overlooking all day ...

javascriptjqueryhtmlcss

The media query in Css3 is not functioning as expected when using max-width

Struggling to hide a specific element when the screen width reaches 980px or less using media queries. Despite my attempts, the element continues to display. Oddly enough, if I use a media query with min-width instead of max-width, the element disappears ...

cssmedia-queries

How can I display an ngx spinner after a delay of 1 second?

I am uncertain about the answer I came across on this platform. intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const time = 900; const spinnerLogic = () => { if (this.isRequestServed ...

javascriptangulartypescriptangular-http-interceptorsrxjs-observables

Enhancing User Experience through 'Remember Me' Feature in Angular App

I need assistance with adding the Remember Me functionality to a login form in an Angular application. Could someone please provide guidance on how to achieve this? Your help would be highly appreciated! Thank you in advance! Below is my login.ts file: ngO ...

angulartypescript

Working with CSS3 transitions in PHPStorm is a breeze

For some reason, my phpstorm does not provide code completion for CSS properties like -webkit-translate, translate, or animation. Has anyone encountered this issue before? Any suggestions on how to fix it? ...

cssphpstorm