Ngx-Bootstrap - menus suspensos
O componente suspenso ngx-bootstrap pode ser alternado e fornece sobreposição contextual para exibir a lista de links, etc. Com as diretivas suspensas, podemos tornar os menus suspensos interativos.
BsDropdownDirective
seletor
[bsDropdown],[dropdown]
Entradas
autoClose - booleano, indica que a lista suspensa será fechada no clique do item ou documento e após pressionar ESC
container - string, um seletor que especifica o elemento ao qual o popover deve ser anexado.
dropup - booleano, este atributo indica que o menu suspenso deve ser aberto para cima.
insideClick - booleano, este atributo indica que a lista suspensa não deve fechar no clique interno quando autoClose está definido como verdadeiro.
isAnimated - booleano, indica que o menu suspenso será animado
isDisabled - booleano, desativa a alternância do menu suspenso e oculta o menu suspenso se aberto
isOpen - boolean, retorna se o popover está sendo mostrado ou não
placement- string, posicionamento de um popover. Aceita: "superior", "inferior", "esquerda", "direita"
triggers- string, especifica os eventos que devem ser disparados. Suporta uma lista de nomes de eventos separados por espaço.
Saídas
isOpenChange - Emite um evento quando isOpen muda
onHidden - Emite um evento quando o popover está oculto
onShown - Emite um evento quando o popover é mostrado
Métodos
show()- Abre o popover de um elemento. Isso é considerado um acionamento 'manual' do popover.
hide()- Fecha o popover de um elemento. Isso é considerado um acionamento 'manual' do popover.
toggle()- Alterna o popover de um elemento. Isso é considerado um acionamento 'manual' do popover.
setConfig() - Definir configuração para popover
Exemplo
Como vamos usar menus suspensos, temos que atualizar app.module.ts usado no capítulo ngx-bootstrap DatePicker para usarBsDropdownModule e BsDropdownConfig.
Atualize app.module.ts para usar o BsDropdownModule e o 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 { }
Atualize test.component.html para usar os menus suspensos.
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>
Atualize test.component.ts para variáveis e métodos correspondentes.
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 e servir
Execute o seguinte comando para iniciar o servidor angular.
ng serve
Assim que o servidor estiver instalado e funcionando. Abra http: // localhost: 4200 e verifique a seguinte saída.