Dropdown in Angular6 with Bootstrap 4.1.3 does not work

问题

trying to implement a dropdown in an angular-app with bootstrap, I am having problems with the layout of the dropdown. The dropdown opens to the left of the button and not as a real dropdown to the bottom. Furthermore the complete navbar gets a new height.

My HTML looks like following:

HTML

    <div class="btn-group" >
      <button
        type="button class="
        btn btn-success dropdown-toggle"
        data-toggle="dropdown"
        aria-haspopup="false" 
        aria-expanded="false" 
        (click)="panelExpanded = !panelExpanded">Login
      </button>
      <div  *ngIf="panelExpanded" >
        <a class="dropdown-item" routerLink="/signin">Anmelden</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" routerLink="/signup">Registrieren</a>
      </div>
    </div>

panelExpanded is just a boolean in the .ts-file.

I tried the two suggested solutions and both did not work so far:

adding class="dropdown-menu"
installing bootstrap (see following)

After adding following import-statement to the angular.json, it still does not work:

"node_modules/bootstrap/dist/css/bootstrap.css",

Additionally I installed ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

and bootstrap

npm i --save bootstrap

I got the following messages though:

bootstrap@4.1.3 requires a peer of jquery@1.9.1

bootstrap@4.1.3 requires a peer of popper.js@^1.14.3

Do I have to install those two packages, as well?

I tried to include the ng-bootstrap-script within angular.json, as well, still without success

"scripts": [
  "node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js",
]

Thanks in advance for any feedback.

回答1:

Possible solution:-

Add: - class="dropdown-menu"

Link:- https://stackblitz.com/edit/angular-stqy1h?file=src/app/app.component.html

<div class="btn-group" >
      <button type="button" class="btn btn-success dropdown-toggle"  data-toggle="dropdown" 
      aria-haspopup="false" 
        aria-expanded="false" 
        (click)="panelExpanded = !panelExpanded">
        Login
      </button>
      <div   class="dropdown-menu" *ngIf="panelExpanded" >
        <a class="dropdown-item" routerLink="/signin">Anmelden</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" routerLink="/signup">Registrieren</a>
      </div>
    </div>

As suggested above by Nizet, you can use @ng-bootstrap too.

For this:-

1) npm install --save @ng-bootstrap/ng-bootstrap
2) npm i --save bootstrap

angular.json:-

"node_modules/bootstrap/dist/bootstrap.min.css"

or:-

1) npm install --save @ng-bootstrap/ng-bootstrap

2) import bootstrap style sheet file, into root style.css as below:

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css';

For using ng-bootstrap,you do not require jquery.js, tether.js or bootstrap.js when using ng-bootstrap. The ng-bottstrap library is to replace those scripts with native Angular 2+ code.

kindly visit https://ng-bootstrap.github.io/#/home

回答2:

Problem is solved.

That would be the HTML for the header.

<nav class="navbar navbar-light bg-light mb-5 fixed-top">
      <a class="navbar-brand" href="#">Title</a>
        <div class="navbar-expand mr-auto">
        <div class="navbar-nav">
          <ul class="nav nav-pills">
            <li class="nav-item">
              <a class="nav-link" routerLink="/dashboard">Main Page</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLink="/about">About</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="navbar-expand ml-auto">
        <div class="navbar-nav">
          <ul class="nav nav-pills">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">Login</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" routerLink="/signin">My Profile</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" routerLink="/signup">Register</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

and in the index.html I've added those scripts.

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

来源：https://stackoverflow.com/questions/53143342/dropdown-in-angular6-with-bootstrap-4-1-3-does-not-work

标签

angular

bootstrap-4

dropdown