Issues encountered when trying to implement a Navbar drop-down menu using Angular in conjunction with Bootstrap 4

I'm currently working on a web application using Angular 5 and Bootstrap 4, and I've encountered issues with the navigation menu bar dropdowns. Despite following the guidelines provided in the official documentation here, I can't seem to get the drop-down menus to function properly!

<header>
    <div class = "row align-items-end nopadding">
        <div class = "col-md-3" style = "background-color: blanchedalmond"><app-logo></app-logo></div>
        <div class = "col-md-6">
            <ul class="nav justify-content-center">
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Links</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Charts</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Articles</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Classifications</a>      
                    <div class="dropdown dropdown-menu">
                        <a class="dropdown-item menu-item" href="#">Teams</a>
                        <a class="dropdown-item menu-item" href="#">Players</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </li>                
            </ul>
        </div>
        <div class = "col-md-3 right-content">
            Right column
        </div>
    </div>
</header>

Can someone please help me figure out what am I doing wrong?

Edit I:

In an attempt to resolve this issue, I have installed jQuery and Popper via npm, updated my angular-cli.json file, and restarted the server:

angular-cli.json:

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

Upon loading the page, I encountered the following error:

Error in the source mapping: request failed with status 404 
Resource URL: http://localhost:4200/ scripts.bundle.js 
Sourcemap URL: bootstrap.min.js.map

The installation of jQuery resulted in this output:

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

Similarly, installing Popper led to the following output:

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

Any suggestions on solving these errors would be greatly appreciated.

htmlcssangularbootstrap-4

Answer №1

Ensure that popper.js is properly integrated and activated within your Angular application since it plays a crucial role in enabling pop-up and drop-down functionalities in Bootstrap 4.

Below is an example of how the relevant section of your angular-cli.json should be configured:

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

To add popper.js to your project, execute the following command:

npm install popper.js --save

For more information, visit: https://www.npmjs.com/package/popper.js

Answer №2

Unfortunately, I'm unable to leave a comment on WebDevBooster's response, so I decided to create a new one instead. To include jQuery and Bootstrap JavaScript files in your angular.json (angular-cli.json) file, add the following declarations:

"scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
        ]

The bootstrap.bundle.min.js file already includes propper.js: https://getbootstrap.com/docs/4.4/components/dropdowns/#overview

Answer №3

My solution involved not utilizing angular-specific attributes. Refer to:

The key attributes are ngbDropdown, ngbDropdownToggle, ngbDropdownMenu, and ngbDropdownItem

I needed to make the following changes:

<li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>

to:

<li class="nav-item dropdown" ngbDropdown>
            <a class="nav-link dropdown-toggle" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" ngbDropdownToggle>
              Link
            </a>
            <ul class="dropdown-menu"  ngbDropdownMenu aria-labelledby="navbarScrollingDropdown">
              <li ngbDropdownItem><a class="dropdown-item" href="#">Action</a></li>
              <li ngbDropdownItem><a class="dropdown-item" href="#">Another action</a></li>
              <li ngbDropdownItem><hr class="dropdown-divider"></li>
              <li ngbDropdownItem><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>

Answer №4

I encountered a similar issue and was able to fix it by taking the following steps:

  1. npm install bootstrap --save
  2. Inserted the following line in styles.css

@import "~bootstrap/dist/css/bootstrap.min.css";

  1. Appended the following code snippets in the index.html

<!doctype html>
<html lang="en>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<head>
  <meta charset="utf-8">

......................

Answer №5

Ensure jQuery is correctly installed in your project root directory

If it's not already installed, you can do so using npm by running the command: npm install jquery --save

Important: If you plan to use bootstrap in your application and have it included in your project, make sure that jQuery is included before adding the bootstrap JavaScript file. Bootstrap requires jQuery for its functionality.

To properly include jQuery in your Angular CLI project, navigate to the angular.json file located at the root of your project folder. Locate the scripts: [] property and add the path to jQuery as shown below:

"scripts": [ "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.js"
       ]

Answer №6

If you want to avoid adding popper and jquery dependencies to your scripts, consider using ng-bootstrap as an alternative. You can find the documentation at . The advantage of using ng-bootstrap instead of including bootstrap, jquery, and popper scripts is that it will not increase the size of your bundle unnecessarily. This is why the angular community has developed ng-bootstrap. Here are the steps to install:

  1. npm install --save @ng-bootstrap/ng-bootstrap
  2. After installation, make sure to import our main module.

Answer №7

Follow these steps to resolve the issue quickly.

Avoid the hassle of installing popper or jquery via npm. Instead, simply insert the following lines into your index.html file within the head tag.

  <!-- BootStrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- JQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- Popper --> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <!-- BootStrap JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Complete functioning code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example Website</title>
  <base href="./"> 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- BootStrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- JQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- Popper --> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 <!-- BootStrap JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 

</head>
<body>
  <div class="dropdown show">
  <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <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>
</body>
</html>

Answer №8

In addition to including app.module.ts, make sure to also import the module MDBBootstrapModule.forRoot() in the module where your navbar code is located.

For example: ../custom.module.ts

import { MDBBootstrapModule } from 'angular-bootstrap-md';
...
@NgModule({
  imports: [
    CommonModule,
    MDBBootstrapModule.forRoot()
  ],
...

Answer №9

On the 21st of May, 2021, an update to Bootstrap version 5.0.1 was released which resulted in some issues for me. Reverting back to version 4.6.0 resolved the issue.

IMPORTANT: If you have included the following scripts & styles in your angular.json, you should not encounter any problems. The bootstrap.bundle.min.js file already includes popper.js within it.

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.scss"
 ],
 "scripts": [
   "node_modules/jquery/dist/jquery.min.js",
   "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
 ]

Answer №10

After encountering the same issue, I found a solution by updating the data-toggle attribute. In your scenario, you should modify it from:

<a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Clasificaciones</a>

To:

<a class="nav-link menu-item dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Clasificaciones</a>

Answer №11

I encountered a similar issue, but was able to discover the solution. If you have bootstrap integrated into your project, a quick fix is to modify

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>

to

<a class="dropdown-toggle" data-toggle="dropdown" href='target="_self"'>Page 1
        <span class="caret"></span></a>

In essence, change href="#" to href='target="_self"'

Answer №12

To start, begin by installing via the command line: npm install --save @ng-bootstrap/ng-bootstrap

Next, insert this line: "./node_modules/bootstrap/dist/css/bootstrap.min.css" into the angular.json file within the styles array

Lastly, within the app.module.ts file, import the dropdown module import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; then add the module in the "import" section as: BsDropdownModule.forRoot()

Answer №13

UPDATE

The previous version of popperjs is no longer supported

To access the new Popper v2, please refer to @popperjs/core. The legacy v1 can be found in this package.

For Angular projects, include the following scripts in angular.json under projects..architect.build.options.scripts

"scripts": [
              "node_modules/@popperjs/core/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]

Answer №14

What I found effective was:

  1. Adding the following lines to my angular.json file

"scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

  1. Inserting these scripts in the header tag of my index.html file

<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86e5e9f4e3c6b4a8bfa8b4">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a0918285d46584659">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

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

Steps for generating a unit test for code that invokes scrollIntoView on an HTML element

I'm currently working on an Angular component where I have a method that involves scrolling through a list of elements known as "cards" based on certain criteria. Despite my efforts to write unit tests for this method using the Jasmine framework, I&ap ...

angulartypescriptunit-testingjasmine

When the dropdown form options in HTML are clicked, they appear disproportionately large compared to the initial select box

Sorry if my wording is a bit off, I'm still relatively new to working with CSS and HTML. I've encountered an issue where the dropdown options appear much larger than the select box itself when clicked. I can't seem to figure out how to fix i ...

htmlcssselectdropdown

The issue of cyclical dependencies in Ionic 2 and Angular 2

Currently utilizing Ionic 2 rc4. Facing an error caused by a cyclical dependency that I need help resolving. +-------------------------------------+ | LoginEmailPage RegisterPage | | ↓ ↓↑ | | ...

angularionic2

Learn how to create a button that will only submit a value when clicked using Node.js and EJS

Currently in my ejs file, I have a button that sends a value to app.js instantly when the program runs. However, I want it to only submit the value when clicked by the user. <% notesArray.forEach((note,i) =>{ %> <div class="note"> ...

javascripthtmlnode.jsejs

Is it possible for me to use AJAX to load content from a string? I am attempting to postpone the activation of certain HTML

I need help optimizing my HTML page that includes certain sections with large Javascript files and images, which are initially hidden. Even when set to "display: none," the browser still loads all the content. One solution could be moving those sections in ...

javascriptjqueryhtmlajax

Attempting to limit the user's input to only the beginning of the string

To prevent unexpected data from affecting the database and front end display, I am looking to limit users from inputting a negative sign at the beginning of their number only. My attempted solution so far: if(e .key Code == 109) { return ; } ...

angular

Is using tables still considered a recommended practice for organizing a layout such as the one shown in the [IMG]?

Looking for recommendations on arranging images in the footer, in line with the design mockup using HTML/CSS. Wondering if tables are still a viable option for this purpose? ...

htmlcsshtml-table

What is the process behind managing today's Google image of the day?

After coming across the javascript picture control on the Google search page, I became interested in replicating it myself. The feature zooms in on a picture when hovering over it, but I couldn't locate the HTML code they were using for it. Is there ...

javascripthtmlcss

css how to style a table row with a specific identifier

Although this question has been asked millions of times on the internet, my English skills are not great and I struggle to find the right words to search. I have a table with a specific ID set up like this: <table class="tableClass"> <tr id="one ...

css

Can a PHP file be used in the src attribute of an HTML5 audio element?

Within my PHP code, I am attempting to include an audio tag like this: '<audio src="song.php" />'.$fallback.'</audio>' I have experimented with various approaches in the "song.php" file, but unfortunately, none of them hav ...

phphtmlaudioattributessrc

The Excel file fails to accurately interpret the date after being extracted from a zip folder

When uploading a zip folder containing an Excel file through the UI, I implemented the following code snippet: getZipData(file: File) { const jsZip = require('jszip'); let excelRecord: any[] = []; let images: { path: string, image: string }[] = [ ...

angularxlsxjszip

image in responsive css design

Image 1 (Current Layout) Image 2 (Desired Layout) I am trying to achieve a responsive layout similar to the second image. However, I seem to be stuck with the layout from the first image. Here is the CSS code I'm currently using: @media (max-width ...

htmlcssresponsive

The chosen Material UI tab stands out with its distinct color compared to the other tabs

Just dipping my toes into the world of Material UI, so bear with me if this question sounds a bit amateur. I've been playing around with Material UI Tabs and successfully tweaked the CSS to fit my needs. Take a look below: https://i.stack.imgur.com/B ...

cssreactjsmaterial-uitabs

What is the process for including a dependency in an npm package in order to install another npm package?

As I work on creating an npm package for my Angular app, I find myself in need of including a dependency that already exists on npm. My dependency object will include the following entries: "dependencies": { "@angular/animations": "^6.1.0", "@angu ...

angularnpmbuild-dependencies

Shifting the key of a choropleth map with R, rMaps, and datamaps

My challenge is to center the legend below a choropleth map of the United States. I don't have much experience with JS or CSS, but I decided to delve into the datamaps.all.min.js file in the R-3.2.1\library\rMaps\libraries\datamaps ...

cssrrchartsdatamapsrmaps

Issue with div not resizing as content is added

HTML Code <div class="container"> <div class="tip_text">A</div> <div class="tip_content">text example</div> </div> <br /><br /><br /> <div class="container"> <div class="tip_text ...

csshtml

Display an image in an Angular application using a secure URL

I am trying to return an image using a blob request in Angular and display it in the HTML. I have implemented the following code: <img [src]="ImageUrl"/> This is the TypeScript code I am using: private src$ = new BehaviorSubject(this.Url); data ...

javascriptangulartypescript

Outlook for Windows automatically sets the default font for HTML emails to Times New Roman

My email design looks great in Mac Outlook, but Windows Outlook is changing the font to Times New Roman. Below is the code for the email template. Can someone help me figure out what I'm missing? <style style="-ms-text-size-adjust: 100%;&q ...

htmlcssoutlooknewsletteroutlook-2016

Having issues with parameterized URL integration between Django2 and Angular2

I am encountering an issue with integrating a URL containing parameters in Angular and Django. When making a call to the url, Django expects a slash at the end while Angular appends a question mark before the parameters. How can this be resolved? Below is ...

djangoangularurlintegration

Storing information from a table into LocalStorage

$('.new_customer').click(function () { var table = $("table"); var number = table.find('tr').length; table.append('<tr id="' + number + '"><td><input type="button" class="btn btn-success btn-xs" ...

javascriptjqueryhtmllocal-storage