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.

IlyaSurmay · Accepted Answer · 2018-05-24T08:52:23.040

64

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>

edited May 24 '18 at 08:52

answered Jan 02 '18 at 11:24

IlyaSurmay

2,283
12
20

1

I've tried to do this with bootstrap 4, but so far unsuccessful https://stackblitz.com/edit/angular-startup-proj – bob.mazzo Feb 20 '18 at 17:12
3

It works. If someone tries it: just remember you have to import `CollapseModule` in `app.module.ts` to use `collapse` directive. – Tonatio Apr 11 '18 at 15:46
3

One thing this loses is the animation as it opens, any idea how to fix that? – Ryan Pelletier Jul 29 '18 at 13:03
this looks perfect, but what changes would be needed to use with bootstrap 4? – bitshift Jan 23 '19 at 21:36
2

Look at the bottom here for bootstrap 4. Not my answer, but it worked. https://github.com/valor-software/ngx-bootstrap/issues/540#issuecomment-272884775 – user749798 Jan 31 '19 at 17:36
how to animate the collapse/uncollapse? i am unable to figure out. – Robert Williams Jun 22 '19 at 12:57
1

You can animate this by setting isAnimated to true. `[collapse]="isCollapsed" [isAnimated]="true"` – Nishan Dec 21 '19 at 21:57

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

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

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

2 Answers2

Linked