Toggle button not working in bootstrap 4 and angular 7 app for navbar

Question

I am working with Angular7 and Botstrap4. trying to add navbar in my app, when navbar is collapsed, toggle button not working.

I don't want to add ng-bootstrap, only bootstrap4.

Here is my code

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">{{title}}</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" routerLink="home">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="about">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="contact">Contact Us</a>
      </li>
    </ul>

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Have you imported BootstrapJS files.?

T04435
– T04435

2019-01-10 05:46:02 +00:00
Commented Jan 10, 2019 at 5:46 — T04435
– T04435, Commented Jan 10, 2019 at 5:46

Colin Lightfoot · Accepted Answer · 2019-03-14 05:04:56Z

7

I think you forgot to include the bootstrap.min.js, jquery.min.js, and popper.min.js file links in angular.json where you already put the bootstrap.min.css.

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

edited Mar 14, 2019 at 5:04

Colin Lightfoot

5491 gold badge5 silver badges22 bronze badges

answered Jan 10, 2019 at 7:38

Atomzwieback

6038 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BeardedPrince · Accepted Answer · 2019-12-10 22:11:27Z

The simple solution to this problem is to import the scripts for jquery, popper and bootstrap intot the index.html file of your application. Doing this will allow your navbar dropdown collapsed nav-links.

i did this and it works very well for me. See sample below

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>TestApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
  </script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
  </script>
</head>

<body>
  <app-root></app-root>
</body>

</html>

Arnold Shangala Mwadwaa · Accepted Answer · 2022-02-04 07:41:12Z

1

For my case in an angular 13 application I had to change data-bs-toggle to data-toggle and data-bs-dismiss to data-dismiss for close button and it is working well.

answered Feb 4, 2022 at 7:41

Arnold Shangala Mwadwaa

4234 silver badges11 bronze badges

Collectives™ on Stack Overflow

Toggle button not working in bootstrap 4 and angular 7 app for navbar

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related