CODEWITHSUNDEEP
angular
mendy
mendy

Reputation: 191

Angular - Navbar collapse not responding

I am learning Angular & I am trying to configure my Navbar once it's in a mobile screen. I have jQuery, Popper & Bootstrap imported in my angular.json file. Now, when I click on the menu, nothing happens. What am I missing?

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky">
  <div class="d-flex flex-grow-1">
      <span class="w-100 d-lg-none d-block"></span>
      <a class="navbar-brand d-none d-lg-inline-block" routerLink="/">
          MA
      </a>
      <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" routerLink="/">
          <img src="//placehold.it/40?text=LOGO" alt="logo">
      </a>
      <div class="w-100 text-right">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
              <span class="navbar-toggler-icon"></span>
          </button>
      </div>
  </div>
  <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
      <ul class="navbar-nav ml-auto flex-nowrap">
        <li class="nav-item">
            <a class="nav-link m-2 menu-item nav-active" href="#about">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link m-2 menu-item nav-active" href="#portfolio">Portfolio</a>
        </li>
        <li class="nav-item">
            <a class="nav-link m-2 menu-item" href="#contact">Contact</a>
        </li>
      </ul>
  </div>

Upvotes: 0

Views: 132

Answers (1)

Sourav Dutta
Sourav Dutta

Reputation: 1332

This works

Do npm install:~ npm i bootstrap jquery --save

OPTION 1

Add the following in angular.json:~

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

OPTION 2

Add the following link and scripts in your index.html

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Hope this is helpful !

Upvotes: 1

Related Questions