Estoy tratando de agregar el menú desplegable Bootstrap 5 en Angular 12, no funciona.
Instalé todos los paquetes necesarios, los agregué al archivo angular.json
.
Copié el ejemplo exacto de los documentos de Bootstrap 5 que aún no funciona.
En angular.json
he dado
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]
A continuación se muestra mi código HTML (igual que en los documentos de Bootstrap 5)
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data- bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div>
Usé el comando npm i
para instalar los paquetes sin mencionar ningún nombre de versión, así que supongo que se instaló la última versión. Instalado jQuery como último recurso leído en algún lugar Bootstrap 5 no requiere jQuery. Cualquier ayuda es muy apreciada.
SegúnBootstrap 5 (sección separada) , Bootstrap 5 requiere @popperjs/core pero no popperjs . Por lo tanto, estaba instalando e importando la biblioteca incorrecta.
FYI, Bootstrap 5 eliminó la dependencia de jQuery .
Requisito previo : ha instalado Bootstrap 5 con
npm install bootstrap@5
@popperjs/core
como dependencias. Vía npm npm install @popperjs/core
@popperjs/core
en angular.json . Popper (biblioteca) debe ir primero (si está utilizando información sobre herramientas o ventanas emergentes) y luego nuestros complementos de JavaScript.angular.json
"scripts": [ "./node_modules/@popperjs/core/dist/umd/popper.min.js", "./node_modules/bootstrap/dist/js/bootstrap.min.js" ]
Requisito previo : ha instalado Bootstrap 5 con
npm install bootstrap@5
El paquete Bootstrap incluye Popper para nuestra información sobre herramientas y popovers. Por lo tanto, no necesita instalar @popperjs/core
separado.
scripts
angular.json .angular.json
"scripts": [ "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ]
Angular Bootstrap Dropdown es otra opción que hace que Bootstrap funcione en la aplicación Angular.
npm install @ng-bootstrap/ng-bootstrap
NgbModule
en la sección de importaciones de app.module.ts. import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @NgModule({ imports: [.., NgbModule] })
<div ngbDropdown class="dropdown"> <button ngbDropdownToggle class="btn btn-secondary" type="button" id="dropdownMenuButton1" aria-expanded="false"> Dropdown button </button> <ul ngbDropdownMenu aria-labelledby="dropdownMenuButton1"> <li><a ngbDropdownItem href="#">Action</a></li> <li><a ngbDropdownItem href="#">Another action</a></li> <li><a ngbDropdownItem href="#">Something else here</a></li> </ul> </div>
Agregue data-bs-toggle="dropdown"
a un enlace o botón para alternar un menú desplegable
Consulte la documentación de arranque para obtener más información.