web-dev-qa-db-fra.com

Comment utiliser Bootstrap dropdown dans l'application Angular 2?

Dans mon projet actuel, je veux ajouter les listes déroulantes, pour cela j'ai pris le code de cette lien . Après avoir ajouté le code ci-dessous, la liste déroulante apparaît comme dans l'exemple mais quand je clique dessus, rien ne se passe.

   <li class="dropdown">
                <a [routerLink]="['/frontendai']" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Application Insights <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a [routerLink]="['/frontendai']">FrontEnd AI</a></li>
                    <li class="divider"></li>
                    <li><a [routerLink]="['/apiai']">API AI</a></li>
                    <li class="divider"></li>
                    <li><a [routerLink]="['/apiai']">SQL Exception</a></li>
                </ul>
            </li>

J'ai utilisé Bootstrap version 3.3.7, et ajouté les lignes ci-dessous dans mon index.cshtml 

<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Comment puis-je utiliser Bootstrap dropdown dans Angular 2 project?

angulartypescriptdropdownbootstrapping
6
Pradeep

ngx-bootstrap est disponible pour Angular Project. (au-dessus de la version 2).

Voici le lien: http://valor-software.com/ngx-bootstrap/#/dropdowns

Vous pouvez l'utiliser sur votre projet.

Instructions

faites npm install ngx-bootstrap --save

Importer le module déroulant 

// RECOMMENDED (doesn't work with system.js)
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
// or
import { BsDropdownModule } from 'ngx-bootstrap';

@NgModule({
  imports: [BsDropdownModule.forRoot(),...]
})
export class AppModule(){}

<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>
8
blackiii

Pour utiliser bootstrap dropdown in angular you need add two classes - one show class at parent dropdown element ie dropdown and other - afficher classe dans son menu déroulant enfant.

Pour ce faire, vous pouvez soit créer un composant déroulant et lui passer une liste de valeurs sous forme de tableau avec leurs gestionnaires de clic, soit créer une directive personnalisée.

Approche de la directive Dropdown personnalisée:

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

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

  constructor(private el: ElementRef) { }

  //Binding click to Add show class 
  @HostListener('click') onclick() {

    var parent = this.el.nativeElement;//parent element
    parent.classList.toggle('show');
    var child = [].filter.call(this.el.nativeElement.children, function(ele) {
      return ele.classList.contains('dropdown-menu');
    }); //Identify the child element on dropdown clicked- dropdwon menu

    if(child.length) {
      child[0].classList.toggle('show');
    }
  }

}

Maintenant, dans le modèle, attachez-le à bootstrap dropdown:

<li class="nav-item dropdown" appDropdown>
   <a class="nav-link dropdown-toggle"  id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Username
   </a>
   <div class="dropdown-menu" aria-labelledby="navbarDropdown">
      <a class="dropdown-item" >Profile 2</a>
      <a class="dropdown-item" >Logout 2</a>
   </div>
 </li>

NOTE - Cette solution est pour Bootstrap 4 Dropdown uniquement, pour Boostrap 3 vous devez identifier les classes qui doivent être Il doit être open classe au niveau parent uniquement.

3
Vishal