Package Exports

ngx-bootstrap-navbar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-bootstrap-navbar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

NgxBootstrapNavbar

What does it do?

Native Angular component and directive for Bootstrap Navbar component. Uses bootstrap classes and Angular Animations for changing the navbars collapse

Try it

See it in action at https://stackblitz.com/edit/angular-bootstrap-dynamic-navbar

How to use it?

Install ngx-bootstrap-navbar in your project:

npm install ngx-bootstrap-navbar

Import the NgxNavbarModule in your app.module.ts:

import { NgxNavbarModule } from 'ngx-bootstrap-navbar';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    NgxNavbarModule
  ],
})
export class AppModule {}

Use the ngx-navbar-collapse component as the container of the .navbar-nav, it applies the basic bootstrap classes too. If you want to dynamically detect that the navbar fits and can be expanded use the ngxNavbarDynamicExpand directive on the navbar. It applies the .navbar and .text-nowrap classes.

<nav ngxNavbarDynamicExpand class="navbar-light bg-light">
  <button class="navbar-toggler" type="button" (click)="collapse.toggle()">
    ....
  </button>
  <ngx-navbar-collapse #collapse="ngxNavbarCollapse">
    <ul class="navbar-nav mr-auto">
      ...
    </ul>
  </ngx-navbar-collapse>
</nav>

Compatibility

@angular/core: ^7.0.0 || ^8.0.0,
bootstrap: ^4.0.0,
rxjs: ^5.5.2 || ^6.0.0