web-dev-qa-db-fra.com

Comment utiliser Bootstrap navbar dans ngx-bootstrap pour Angular 5?

La barre de navigation bootstrap n'existe pas dans la liste des composants ngx-bootstrap. S'il vous plaît aidez-moi à le mettre en œuvre.

angularnavbarngx-bootstrap
21
Hossein Bajan

Il n'y a pas d'implémentation de navbar en tant que composant séparé, mais vous pouvez le faire avec Collapse Module.

Exemple = 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 (extrait)

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>
47
IlyaSurmay

Dans Angular V7 avec la configuration suivante

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

Merci @llyaSurmay Vraiment un bon exemple. Mon cas était légèrement différent sans module réductible, utilisant également le module de fonctionnalités comme ci-dessous

enter image description here

Si vous utilisez le module de fonctionnalité, vous devez également y ajouter vos importations de modules de liste déroulante enter image description here

J'espère que cela aidera quelqu'un qui tente d'implémenter le module de liste déroulante ngx-bootstrap dans la barre de navigation. Merci

1
Ragavan Rajan