Cliquez sur le bouton pour ouvrir le menu déroulant

Question

J'utilise bootstrap 5 cdn et je souhaite ouvrir la liste déroulante sans cliquer dessus.

J'utilise une barre de navigation et je souhaite afficher des "liens déroulants" :

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="conteneur-fluide">
    <a class="navbar-brand" href="#">Navbar</a>
    <bouton
      class="navbar-toggler"
      type="bouton"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNavDropdown"
      aria-controls="navbarNavDropdown"
      aria-expanded="faux"
      aria-label="Basculer la navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </bouton>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link actif" aria-current="page" href="#">Accueil</a>
        ≪/li>
        <li class="liste déroulante des éléments de navigation">
          <un
            class = "nav-link dropdown-toggle"
            href="#"
            id="test"
            role="bouton"
            data-bs-toggle="liste déroulante"
            aria-expanded="faux"
          >
            Lien déroulant
          ≪/a>
          <ul class="menu déroulant" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Une autre action</a></li>
            <li><a class="dropdown-item" href="#">Autre chose ici</a></li>
          </ul>
        ≪/li>
      </ul>
    </div>
  </div>
</nav>
<button class="btn btn-primary btn-sm" (cliquez)="open()">Ouvrir</button>

Dans le composant, j'essaie de faire ce qui suit mais cela ne fonctionne pas :

classe d'exportation AppComponent {
  ouvrir() {
    const dropdown = document.getElementById('test');
    dropdown.click();
  }
}
Je l'ai fait dans stackblitz : test
            

Answer 1

Ajouter l'attribut bootstrap au bouton :

<button
    class="btn btn-primary btn-sm"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#navbarNavDropdown"
    aria-controls="navbarNavDropdown"
    aria-expanded="false"
    aria-label="Toggle navigation"
 >
     Abrir
</button>

Code du lien : https://stackblitz.com/edit/angular-bootstrap-5-dynamic-navbar-77sj13?file=app/app.component.html

Cela fonctionnera cependant. Gardez à l'esprit que votre application angulaire doit contrôler ces éléments, donc mélanger des bibliothèques externes avec des bibliothèques framework (Angular, Vue, React) causera toujours des problèmes

Pour cette utilisation, il existe des implémentations spéciales, par exemple : https://ng- bootstrap.github.io/#/home Guide d'angle

Une autre option consiste à utiliser ngIf pour afficher la barre de navigation (pas d'animation par défaut)

Un autre lien : https://stackblitz.com/edit/angular-bootstrap-5-dynamic-navbar-hygpzq?file=app/app.component.html