Bootstrap navbar doesn't exist in the ngx-bootstrap components list. Please help me to implement it.
Add a comment
|
2 Answers
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>
7 Comments
bob.mazzo
I've tried to do this with bootstrap 4, but so far unsuccessful stackblitz.com/edit/angular-startup-proj
Tonatio
It works. If someone tries it: just remember you have to import
CollapseModule in app.module.ts to use collapse directive.Ryan Pelletier
One thing this loses is the animation as it opens, any idea how to fix that?
user749798
Look at the bottom here for bootstrap 4. Not my answer, but it worked. github.com/valor-software/ngx-bootstrap/issues/…
Nishan
You can animate this by setting isAnimated to true.
[collapse]="isCollapsed" [isAnimated]="true" |
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
