How to implement a bootstrap menu in an Angular project?

Asked

Viewed 432 times

0

I put the following code and it didn’t work;

<nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </nav>

It was supposed to be like this:

Navbar

is my Angular settings, is there something missing? is in the file .angular-cli.json

  "styles": [
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css",

        "styles.css"
      ],
      "scripts": [ "../node_modules/bootstrap/js/dist/collapse.js"],
bootstrap-3 angular
  • 1

    is there an error in the console? keep in mind that changes in anuglar-cli.json require you to restart the server. Try following this tutorial -> https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

  • i followed this installation, no error messages appear on the console, most bootstrap implementations work, but this navigation is not working.

1 answer

1

Normally, jQuery should also be included before using Collapse.js or use Bootstrap UI if you do not want to include jQuery in the angular design.

Browser other questions tagged bootstrap-3 angular

You are not signed in. Login or sign up in order to post.