Ngx-Bootstrap - Desplegables
El componente desplegable ngx-bootstrap se puede alternar y proporciona una superposición contextual para mostrar la lista de enlaces, etc. Con las directivas desplegables podemos hacer que los menús desplegables sean interactivos.
BsDropdownDirectiva
selector
[bsDropdown],[dropdown]
Entradas
autoClose - booleano, indica que el menú desplegable se cerrará al hacer clic en el elemento o documento y después de presionar ESC
container - cadena, un selector que especifica el elemento al que se debe agregar el popover.
dropup - booleano, este atributo indica que el menú desplegable debe abrirse hacia arriba.
insideClick - booleano, este atributo indica que el menú desplegable no debe cerrarse al hacer clic en el interior cuando autoClose se establece en verdadero.
isAnimated - booleano, indica que el menú desplegable se animará
isDisabled - booleano, desactiva la alternancia desplegable y oculta el menú desplegable si se abre
isOpen - booleano, devuelve si el popover se muestra actualmente o no
placement- cuerda, Colocación de un popover. Acepta: "arriba", "abajo", "izquierda", "derecha"
triggers- cadena, especifica los eventos que deben activarse. Admite una lista de nombres de eventos separados por espacios.
Salidas
isOpenChange - Emite un evento cuando isOpen cambia
onHidden - Emite un evento cuando el popover está oculto
onShown - Emite un evento cuando se muestra el popover
Métodos
show()- Abre la ventana emergente de un elemento. Esto se considera una activación "manual" del popover.
hide()- Cierra la ventana emergente de un elemento. Esto se considera una activación "manual" del popover.
toggle()- Alterna el popover de un elemento. Esto se considera una activación "manual" del popover.
setConfig() - Establecer configuración para popover
Ejemplo
Como vamos a usar menús desplegables, tenemos que actualizar app.module.ts usado en el capítulo de ngx-bootstrap DatePicker para usarBsDropdownModule y BsDropdownConfig.
Actualice app.module.ts para usar BsDropdownModule y BsDropdownConfig.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule,AlertConfig } from 'ngx-bootstrap/alert';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDatepickerModule, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { BsDropdownModule,BsDropdownConfig } from 'ngx-bootstrap/dropdown';
@NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserAnimationsModule,
BrowserModule,
AccordionModule,
AlertModule,
ButtonsModule,
FormsModule,
CarouselModule,
CollapseModule,
BsDatepickerModule.forRoot(),
BsDropdownModule
],
providers: [AlertConfig, BsDatepickerConfig, BsDropdownConfig],
bootstrap: [AppComponent]
})
export class AppModule { }
Actualice test.component.html para usar los menús desplegables.
test.component.html
<div class="btn-group" dropdown #dropdown="bs-dropdown" [autoClose]="false">
<button id="button-basic" dropdownToggle type="button"
class="btn btn-primary dropdown-toggle"
aria-controls="dropdown-basic">
Menu <span class="caret"></span>
</button>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
role="menu" aria-labelledby="button-basic">
<li role="menuitem"><a class="dropdown-item" href="#">File</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Edit</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Search</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#">Recents</a>
</li>
</ul>
</div>
<button type="button" class="btn btn-primary"
(click)="dropdown.isOpen = !dropdown.isOpen">Show/Hide
</button>
Actualice test.component.ts para las variables y métodos correspondientes.
test.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}
Construir y servir
Ejecute el siguiente comando para iniciar el servidor angular.
ng serve
Una vez que el servidor está en funcionamiento. Abra http: // localhost: 4200 y verifique el siguiente resultado.