Bootstrap navbar не существует в списке компонентов ngx-bootstrap. Пожалуйста, помогите мне реализовать его.
Как я могу использовать навигационную панель Bootstrap в ngx-bootstrap для Angular 5?
Ответ 1
Там нет реализации navbar в качестве отдельного компонента, но это можно сделать с помощью модуля Collapse.
Пример = https://stackblitz.com/edit/ngx-bootstrap-rc8ab4?file=app%2Fapp.component.ts
МОДУЛЬ
// 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 (выдержка)
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>