Ngx-Bootstrap - Tasten

ngx-bootstrap-Schaltflächen verfügen über zwei spezifische Anweisungen, mit denen sich eine Gruppe von Schaltflächen als Kontrollkästchen, Optionsfelder oder Hybrid verhält, bei denen ein Optionsfeld deaktiviert werden kann.

ButtonCheckboxDirective

Fügen Sie jedem Element Kontrollkästchenfunktionen hinzu.

Wähler

[btnCheckbox]

Eingänge

btnCheckboxFalse - Boolean, Falsy-Wert, wird auf ngModel gesetzt, Standard: false
btnCheckboxTrue - boolean, Truthy value, wird auf ngModel gesetzt, Standard: true

ButtonRadioDirective

Erstellen Sie Optionsfelder oder Gruppen von Schaltflächen. Ein Wert einer ausgewählten Schaltfläche ist an eine über ngModel angegebene Variable gebunden.

Wähler

[btnRadio]

Eingänge

btnRadio - string, Optionsfeldwert, wird auf ngModel gesetzt
disabled - boolean, Wenn true - ist das Optionsfeld deaktiviert
uncheckable - boolean, If true - Das Optionsfeld kann deaktiviert werden
value - Zeichenfolge, Aktueller Wert der Funkkomponente oder -gruppe

ButtonRadioGroupDirective

Eine Gruppe von Optionsfeldern. Ein Wert einer ausgewählten Schaltfläche ist an eine über ngModel angegebene Variable gebunden.

Wähler

[btnRadioGroup]

Beispiel

Da wir Schaltflächen verwenden werden, müssen wir app.module.ts aktualisieren, die im Kapitel ngx-bootstrap Alerts verwendet werdenButtonsModule. Wir fügen auch Unterstützung für Eingabesteuerelemente mit FormModule hinzu.

Aktualisieren Sie app.module.ts, um AlertModule und AlertConfig zu verwenden.

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 { }

Aktualisieren Sie test.component.html, um die Schaltflächen zu verwenden.

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>

Aktualisieren Sie test.component.ts für entsprechende Variablen und Methoden.

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

Bauen und dienen

Führen Sie den folgenden Befehl aus, um den Winkelserver zu starten.

ng serve

Sobald der Server betriebsbereit ist. Öffnen Sie http: // localhost: 4200 und überprüfen Sie die folgende Ausgabe.