Hamburger menu items not showing up with data-toggle in Angular

Question

I am learning both Angular and bootstrap. To combine those, I tried to copy some working html content to an Angular component. However, some functionality doesn't work yet. When I click at the hamburger menu icon, nothing is toggled and the nav bar items are not being displayed. This 'data-toggle' functionality seems to work with jquery and so I also tried to import scripts for this.

Here the code with the 'data-toggler':

<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navigation"> &#9776; </button>

<div class="collapse navbar-toggleable-xs" id="navigation"> ... </div>

Underneath I tried to import JQuery scripts;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>

This is the whole component:

app.component.html

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
   <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans:400,500,700' rel='stylesheet' type='text/css'>
  </head>

<body>
  <nav class="navbar navbar-fixed-top">

  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navigation">
    &#9776;
  </button>

  <div class="collapse navbar-toggleable-xs" id="navigation">
    <ul class="nav navbar-nav float-sm-right">
      <li class="nav-item">
        <a class="nav-link" href="#social">CONNECT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#who">WHO</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#work">WORK</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#why">WHY</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#customers">CUSTOMERS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#pricing">PRICING</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">CONTACT</a>
      </li>
    </ul>
  </div>

</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
</body>

</html>

Does anyone know why the list items are not being displayed when the button has been pressed?

dschu dschu · Accepted Answer · 2017-04-26T14:39:26

Without looking into too much detail, I'll highly recommend you to not mix Angular with jQuery. This is, were all the messing things up starts..

You can either use material to build this kind of navigation or use the Bootstrap components written in pure AngularJS by the AngularUI Team. There's also a Semantic UI Angular Integrations Repository if you aren't happy with the other two.

Hamburger menu items not showing up with data-toggle in Angular

1 Answers