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.