How can I use Bootstrap navbar in ngx-bootstrap for Angular 5?

Question

Bootstrap navbar doesn't exist in the ngx-bootstrap components list. Please help me to implement it.

Answer 1

There's no implementation of navbar as a separate component but it can be done with Collapse Module.

Example = https://stackblitz.com/edit/ngx-bootstrap-rc8ab4?file=app%2Fapp.component.ts

MODULE

// App imports
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { CollapseModule } from 'ngx-bootstrap/collapse';

@NgModule({
  imports:      [ BrowserModule, CollapseModule.forRoot()],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

TS (excerpt)

export class AppComponent  {
  isCollapsed = true;
}

HTML

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" (click)="isCollapsed = !isCollapsed" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" [collapse]="isCollapsed">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 2

In Angular V7 with the following config

    Angular CLI: 7.2.2
    Node: 10.14.1
    OS: win32 x64
    Angular: 7.2.1

Thanks @llyaSurmay Really a good example. My case was slightly different without collapsible module also using feature module just like below

If you are using feature module then you need to add your dropdownmodule imports there as well

Hope it helps someone who is trying to implement the ngx-bootstrap dropdown module in to the navbar. Thanks