Bootstrap navbar collapse & dropdown don’t work

Bug description:

The navbar is not in ng-bootstrap component list but if you follow ng-bootstrap recommendations, you only need to import bootstrap css file. Therefore the navbar collapse and dropdown don’t seem to work.

Link to minimally-working StackBlitz (plunker) that reproduces the issue:

In this example, the collapse doesn’t work for small frame and if you increase the size of the frame, you’ll see that the dropdown doesn’t work either.

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 7.0.0

ng-bootstrap: 4.0.0

Bootstrap: 4.1.0

1 possible answer(s) on “Bootstrap navbar collapse & dropdown don’t work

  1. @natcohen Thanks to report these things. Unfortunately these 2 items are not valid issues.

    • dropdown: we actually do have as a component

    • navbar: you are right, we don’t provide any component for it. Still, navbar needs a bit of dynamic behavior to be able to toggle the associated css class properly. You would just need a boolean property on your component hosting it, and add a class binding to toggle the class. You could have a look at the source of our demo application, here are some info:

    export class AppComponent implements OnInit {
    navbarCollapsed = true;
    <button class=”navbar-toggler navbar-toggler-righttype=”button(click)=”navbarCollapsed = !navbarCollapsed[attr.aria-expanded]=”!navbarCollapsed
    aria-controls=”navbarContentaria-expanded=”falsearia-label=”Toggle navigation>
    <span class=”navbar-toggler-icon></span>