Dropdown in Angular6 with Bootstrap 4.1.3 does not work

Question

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:

1. adding class="dropdown-menu"
2. 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:

[email protected] requires a peer of [email protected]

[email protected] 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.

Answer 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