Ngx-Bootstrap - Tombol

Tombol ngx-bootstrap memiliki dua arahan khusus yang membuat sekelompok tombol berperilaku sebagai kotak centang atau tombol radio atau hibrid di mana tombol radio tidak dapat dicentang.

ButtonCheckboxDirective

Tambahkan fungsionalitas kotak centang ke elemen apa pun.

pemilih

• [btnCheckbox]

Masukan

• btnCheckboxFalse - boolean, nilai Falsy, akan disetel ke ngModel, default: false

• btnCheckboxTrue - boolean, nilai Truthy, akan disetel ke ngModel, default: true

ButtonRadioDirective

Buat tombol radio atau kelompok tombol. Nilai dari tombol yang dipilih terikat ke variabel yang ditentukan melalui ngModel.

pemilih

• [btnRadio]

Masukan

• btnRadio - string, nilai tombol Radio, akan disetel ke ngModel

• disabled - boolean, Jika true - tombol radio dinonaktifkan

• uncheckable - boolean, Jika benar - tombol radio tidak dapat dicentang

• value - string, nilai saat ini dari komponen atau grup radio

ButtonRadioGroupDirective

Sekelompok tombol radio. Nilai dari tombol yang dipilih terikat ke variabel yang ditentukan melalui ngModel.

pemilih

• [btnRadioGroup]

Contoh

Karena kami akan menggunakan tombol, Kami telah memperbarui app.module.ts yang digunakan dalam bab Peringatan ngx-bootstrap untuk digunakan.ButtonsModule. Kami juga menambahkan dukungan untuk kontrol masukan menggunakan FormModule.

Perbarui app.module.ts untuk menggunakan AlertModule dan 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 { }

Perbarui test.component.html untuk menggunakan tombol.

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>

Perbarui test.component.ts untuk variabel dan metode yang sesuai.

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++;
   }
}

Bangun dan Sajikan

Jalankan perintah berikut untuk memulai server sudut.

ng serve

Setelah server aktif dan berjalan. Buka http: // localhost: 4200 dan verifikasi keluaran berikut.