Angular ngx bootstrap es un marco de arranque que se usa con angular para crear componentes con un gran estilo y este marco es muy fácil de usar y se usa para crear sitios web receptivos.
En este artículo, veremos cómo usar los menús desplegables en angular ngx bootstrap.
Sintaxis de instalación:
npm install ngx-bootstrap --save
Acercarse:
- Primero, instale el bootstrap angular ngx usando el comando mencionado anteriormente.
- Agregue el siguiente script en index.html
<enlace href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” rel=”hoja de estilo”>
- Importar componente desplegables en module.ts
- En app.component.html, cree un componente de menús desplegables.
- Sirve la aplicación usando ng serve.
Ejemplo 1:
index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <base href="/"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href= "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body class="mat-typography"> <app-root></app-root> </body> </html>
app.component.html
<div class="btn-group" dropdown> <button id="button-basic" dropdownToggle type="button" class="btn btn-success dropdown-toggle" aria-controls="dropdown-basic"> Dropdown 1 </button> <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic"> <li role="menuitem"> <a class="dropdown-item">gfg</a> </li> <li role="menuitem"> <a class="dropdown-item">geeks</a> </li> <li role="menuitem"> <a class="dropdown-item">GeeksforGeeks</a> </li> </ul> </div> <div class="btn-group" dropdown> <button id="button-basic" dropdownToggle type="button" class="btn btn-danger dropdown-toggle" aria-controls="dropdown-basic"> Dropdown 2 </button> <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic"> <li role="menuitem"> <a class="dropdown-item">gfg1</a> </li> <li role="menuitem"> <a class="dropdown-item">geeks1</a> </li> <li role="menuitem"> <a class="dropdown-item">GeeksforGeeks1</a> </li> </ul> </div>
app.module.ts
import { NgModule } from '@angular/core';
// Importing forms module
import { FormsModule, ReactiveFormsModule }
from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { AppComponent } from './app.component';
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent
],
imports: [
FormsModule,
BrowserModule,
BrowserAnimationsModule,
ReactiveFormsModule,
BsDropdownModule.forRoot()
]
})
export class AppModule { }
Producción:
Referencia: https://valor-software.com/ngx-bootstrap/dropdowns