Ngx-Bootstrap - Botões
Os botões do ngx-bootstrap têm duas diretivas específicas que fazem com que um grupo de botões se comporte como caixa de seleção ou botões de opção ou híbridos onde um botão de opção pode ser desmarcado.
ButtonCheckboxDirective
Adicione a funcionalidade de caixa de seleção a qualquer elemento.
seletor
[btnCheckbox]
Entradas
btnCheckboxFalse - booleano, valor Falsy, será definido como ngModel, padrão: falso
btnCheckboxTrue - booleano, valor verdadeiro, será definido como ngModel, padrão: verdadeiro
ButtonRadioDirective
Crie botões de opção ou grupos de botões. Um valor de um botão selecionado é vinculado a uma variável especificada via ngModel.
seletor
[btnRadio]
Entradas
btnRadio - string, valor do botão de rádio, será definido como ngModel
disabled - booleano, se verdadeiro - o botão de opção está desativado
uncheckable - booleano, se verdadeiro - o botão de opção pode ser desmarcado
value - string, valor atual do componente ou grupo de rádio
ButtonRadioGroupDirective
Um grupo de botões de opção. Um valor de um botão selecionado é vinculado a uma variável especificada via ngModel.
seletor
[btnRadioGroup]
Exemplo
Como vamos usar botões, temos que atualizar app.module.ts usado no capítulo de alertas do ngx-bootstrap para usarButtonsModule. Também estamos adicionando suporte para controles de entrada usando FormModule.
Atualize app.module.ts para usar AlertModule e AlertConfig.
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';
@NgModule({
declarations: [
AppComponent,
TestComponent
],
imports: [
BrowserAnimationsModule,
BrowserModule,
AccordionModule,
AlertModule,
ButtonsModule,
FormsModule
],
providers: [AlertConfig],
bootstrap: [AppComponent]
})
export class AppModule { }
Atualize test.component.html para usar os botões.
test.component.html
<button type="button" class="btn btn-primary" (click)="clicked()">
Single Button
</button>
<pre class="card card-block card-header">
{{clickCounter}}
</pre>
<p>Button as Checkbox</p>
<div class="btn-group">
<label class="btn btn-primary" [(ngModel)]="checkModel.left"
btnCheckbox tabindex="0" role="button">Left</label>
<label class="btn btn-primary" [(ngModel)]="checkModel.right"
btnCheckbox tabindex="0" role="button">Right</label>
</div>
<pre class="card card-block card-header">
{{checkModel | json}}
</pre>
<p>Button as RadionButton</p>
<div class="form-inline">
<div class="btn-group" btnRadioGroup [(ngModel)]="radioModel">
<label class="btn btn-success" btnRadio="Left">Left</label>
<label class="btn btn-success" btnRadio="Right">Right</label>
</div>
</div>
<pre class="card card-block card-header">
{{radioModel}}
</pre>
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 {
checkModel = { left: false, right: false };
radioModel = 'Left';
clickCounter = 0;
constructor() { }
ngOnInit(): void {
}
clicked(): void {
this.clickCounter++;
}
}
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.