web-dev-qa-db-fra.com

Liste déroulante Bootstrap avec Angular 6

J'essaie de créer un élément déroulant dans une barre de navigation Bootstrap en utilisant Angular 6. Mon code fonctionne lorsque je le teste en ligne: 

<nav class="navbar bg-light navbar-light navbar-expand">
<ul class="navbar-nav">
  <li class="nav-item dropdown" >
    <a class="nav-link dropdown-toggle" data-toggle="dropdown">Page1</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Page1.1</a>
    </div>
  </li>
  <li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>

Mais la liste déroulante ne fonctionne pas avec Angular 6. J'ai utilisé la méthode suivante pour utiliser Bootstrap avec Angular: 

ng add @ng-bootstrap/schematics

Et tout fonctionne bien sauf pour cet élément de liste déroulante!

angulardrop-down-menubootstrap-4ng-bootstrap
1
krirkrirk

J'ai rencontré le même problème plus tôt et j'ai trouvé ce qui suit:

  1. html devrait être lié à la classe container dans le bootstrap comme indiqué dans Bootstrap Layout
  2. Les listes déroulantes sont construites sur une bibliothèque tierce Popper.js comme indiqué dans Bootstrap Dropdown

D'après ce que je sais de votre problème, vous ne vous êtes pas référé à la javascript requise, c'est-à-dire util.js, bootstrap.js, popper.js ou à la version simplifiée.

Ici, je n'ai rien fait beaucoup, il suffit de se référer aux fichiers javascript requis dans le fichier d'index

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Et j'ai créé un composant de navigation et un design comme requis comme ceci:

<div class="container">
    <!-- Content here -->
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</div

La démo de travail peut être trouvée ici . J'espère que cela vous aide.

6
Iswar

J'ai rencontré le même problème d'amorçage, mais j'ai la solution… .. Si vous utilisez Angular 6, inutile d'ajouter Popper.js pour l'amorçage. Vous devez ajouter bootstrap 4 puis ajouter rxjs-compat .

npm install rxjs-compat

Et ajoutez ngx-bootstrap pour effectuer une action déroulante. Installez le ngx-bootstrap,

npm install ngx-bootstrap --save

maintenant, nous devons ajouter le module de liste déroulante de ngx-bootstrap dans votre application en utilisant le code suivant

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
import { AppComponent } from './app.component';

@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   CommonModule,
   BsDropdownModule.forRoot(),
   TooltipModule.forRoot(),
   ModalModule.forRoot()
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

puis j'ai fait quelques changements dans votre code et ça fonctionne très bien pour moi.

<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
  <li class="dropdown" dropdown >
    <a dropdownToggle role="button"> <!-- {2} -->
        Page1<span class="caret"></span></a>
    <div *dropdownMenu class="dropdown-menu">
      <a class="dropdown-item" href="#">Page1.1</a>
    </div>
  </li>
  <li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>
6
Rushikesh Salunke

Voici...

J'ai fait ci-dessous des changements - 

1. app.component.html 

<p>
  Start editing to see some magic happen :)
</p>
<nav class="navbar bg-light navbar-light navbar-expand">
<ul class="nav navbar-nav">
  <li class="dropdown" appDropdown>
    <a href="#" class="dropdown-toggle" role="button">Page1</a>
    <ul class="dropdown-menu">
      <li><a href="#">Page1.1</a></li>
      <li><a href="#">Page1.2</a></li>
      <li><a href="#">Page1.3</a></li>
    </ul>
  </li>
  <li><a class="nav-link" href="#">Page2</a></li>
</ul>
</nav>

2. app.module.ts

J'ai ajouté une directive pour écouter l'événement de clic pour la liste déroulante, puis importé de la même manière dans app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import { DropdownDirective } from './dropdown.directive';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, DropdownDirective ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

3. dropdown.directive.ts

Directive ajoutée pour écouter l'événement click

import { Directive, HostListener, ElementRef, Renderer2 } from "@angular/core";

@Directive({
  selector: '[appDropdown]'
})

export class DropdownDirective {
  manageDropdown : boolean = false;

  constructor(private elementRef: ElementRef, private renderer: Renderer2)   {

  }

  @HostListener('click') openDropdown(eventData: Event) {
    if(!this.manageDropdown) {
      this.renderer.addClass(this.elementRef.nativeElement,'open');
      this.manageDropdown = !this.manageDropdown;
    } else {
      this.renderer.removeClass(this.elementRef.nativeElement, 'open');
      this.manageDropdown = !this.manageDropdown;
    }
  }
}

4. angular.json

Vous demandant de faire "npm install --save bootstrap @ 3" et d'effectuer les modifications ci-dessous dans le fichier angular.json.

"styles": [
              "src/styles.css",
              "../node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "../node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Note - Pour votre référence s'il vous plaît visitez reference link. Vous pouvez voir la démo déroulante.

2
FrontEndOnDemand

La réponse de @Rushikesh Salunke est excellente, mais à l'époque, je l'utilisais déjà. J'utilisais déjà la bibliothèque @ ng-bootstrap, pas ngx, et c'est ce que j'ai trouvé dans docs .

Commencez par importer le module NgbDropdown dans le composant que vous souhaitez utiliser.

import { NgbDropdown} from '@ng-bootstrap/ng-bootstrap';

Puis modifiez votre fichier .html comme suit: 

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>
</div>

Vous pouvez voir d'autres cas d'utilisation ici .

1
gonzarodriguezt