Bootstrap drop down is not expanding

Question

This is my HTML code with bootstrap classes and is using it in Angular here the dropdown is not expanding, values Save Data and Fetch Data are not displaying in the browser. But If I use the same code in any online bootstrap workspace it works fine (example W3schools). Here something is not supporting it. I don't understand what I'm missing here. Can anyone please help me out this problem?

<ul class="nav navbar-nav navbar-right">
        <li class="dropdown open">
           <a  class="dropdown-toggle" role="button"  href="#">Manage <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li > <a href="#"> Save Data</a></li>
              <li> <a href="#"> Fetch Data</a></li>
             </ul>
          </li>
     </ul>

And I have added Bootstrap CSS in file angular.json file like in below,

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

I am using Bootstrap v4.1.2.

Dženis H. · Answer 1 · 2018-08-13T14:08:33.397

You want to make a header.component.html file of some sorts where you would have your logo and your nav links, that include Manage, Save Data, and Fetch Data ... I think what you're trying to accomplish goes something like this:

 <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a routerLink="/" class="navbar-brand">Your App Name</a>
    </div>

    <div class="navbar-default">
      <ul class="nav navbar-nav">
        <li routerLinkActive="active">
          <a routerLink="/recipes">Recipes</a>
        </li>
        <li routerLinkActive="active">
          <a routerLink="/shopping-list">Shopping List</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <ng-template [ngIf]="!authService.isAuthenticated()">
          <li><a routerLink="/signin">Sign In</a></li>
          <li><a routerLink="/signup">Sign Up</a></li>
        </ng-template>
          <li *ngIf="authService.isAuthenticated()"><a style="cursor: pointer;" (click)="onLogout()">Sign Out</a></li>
        <li appDropdown class="dropdown" *ngIf="authService.isAuthenticated()">
          <a class="dropdown-toggle" role="button" style="cursor: pointer;">Manage <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a style="cursor: pointer;" (click)="onSaveData()">Save Data</a></li>
            <li><a style="cursor: pointer;" (click)="onFetchData()">Fetch Data</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Under this code, you can find a simple Bootstrap 4 implementation:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Simple Example!</title>
  </head>
  <body>
<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-success btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Save Data
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-info btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Fetch Data
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap drop down is not expanding

1 Answers1