Search code examples
htmlcssangularbootstrap-4

Navbar drop-down menu not working with Angular and Bootstrap 4

I'm developing a web application with Angular 5 and Bootstrap 4 and I'm having problems with the nav menu bar dropdowns. I'm following the documentation https://getbootstrap.com/docs/4.0/components/navs/ but I don't know why drop-down menu doesn't work!

<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="#">Ligas</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Gráficas</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link menu-item" href="#">Artículos</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">Clasificaciones</a>      
                    <div class=" dropdown dropdown-menu">
                        <a class="dropdown-item menu-item" href="#">Equipos</a>
                        <a class="dropdown-item menu-item" href="#">Jugadoras</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>

What am I doing wrong?

Edit I:

I have added jquery and popper through npm, update muy angular-cli.json and restart the server:

angular-cli.json:

enter image description here

And when I load the page I've got this 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

When I have installed jquery I've got this output:

enter image description here

And when I hace installed popper I've got this output:

enter image description here

What am I doing wrong?

Solution

  • You have to make sure that popper.js is included and loaded in your Angular app because that is required for all things that pop up or drop down in Bootstrap 4.

    Here's what the relevant part of your angular-cli.json should look like:

    "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 install popper.js use this command:

    npm install popper.js --save

    Reference: https://www.npmjs.com/package/popper.js