Boolean toggle via [(ngModel)].
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsCheckboxComponent } from '@mintplayer/ng-bootstrap/checkbox';
@Component({
selector: 'app-single-checkbox',
imports: [FormsModule, BsCheckboxComponent],
templateUrl: './single-checkbox.component.html',
})
export class SingleCheckboxComponent {
readonly agreed = signal(false);
}
<bs-checkbox name="agree" [(ngModel)]="agreed">
I agree to the terms
</bs-checkbox>
Boolean toggle via [formControl].
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { BsCheckboxComponent } from '@mintplayer/ng-bootstrap/checkbox';
@Component({
selector: 'app-single-checkbox-reactive',
imports: [ReactiveFormsModule, BsCheckboxComponent],
templateUrl: './single-checkbox-reactive.component.html',
})
export class SingleCheckboxReactiveComponent {
readonly agreed = new FormControl(false, { nonNullable: true });
}
<bs-checkbox name="agree" [formControl]="agreed">
I agree to the terms
</bs-checkbox>
Same form contract as 'checkbox'; only the visual differs.
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsCheckboxComponent } from '@mintplayer/ng-bootstrap/checkbox';
@Component({
selector: 'app-switch',
imports: [FormsModule, BsCheckboxComponent],
templateUrl: './switch.component.html',
})
export class SwitchComponent {
readonly darkMode = signal(false);
}
<bs-checkbox type="switch" [(ngModel)]="darkMode">
Dark mode
</bs-checkbox>
Checkbox-style button-toggle (standalone, single boolean).
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsToggleButtonComponent } from '@mintplayer/ng-bootstrap/checkbox';
@Component({
selector: 'app-toggle-button',
imports: [FormsModule, BsToggleButtonComponent],
templateUrl: './toggle-button.component.html',
})
export class ToggleButtonComponent {
readonly bold = signal(false);
}
<bs-toggle-button [(ngModel)]="bold">
Bold
</bs-toggle-button>
string[] form value. The group's [name] wins; per-instance [name] on the children is ignored.
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsCheckboxComponent, BsCheckboxGroupComponent } from '@mintplayer/ng-bootstrap/checkbox';
@Component({
selector: 'app-checkbox-group',
imports: [FormsModule, BsCheckboxComponent, BsCheckboxGroupComponent],
templateUrl: './checkbox-group.component.html',
})
export class CheckboxGroupComponent {
readonly toppings = signal<string[]>([]);
}
<bs-checkbox-group name="toppings" aria-label="Toppings" [(ngModel)]="toppings">
<bs-checkbox value="cheese" class="form-check-inline">Cheese</bs-checkbox>
<bs-checkbox value="mushroom" class="form-check-inline">Mushroom</bs-checkbox>
<bs-checkbox value="olive" class="form-check-inline">Olive</bs-checkbox>
</bs-checkbox-group>
Same shape via [formControl] bound on the group element.
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { BsCheckboxComponent, BsCheckboxGroupComponent } from '@mintplayer/ng-bootstrap/checkbox';
@Component({
selector: 'app-checkbox-group-reactive',
imports: [ReactiveFormsModule, BsCheckboxComponent, BsCheckboxGroupComponent],
templateUrl: './checkbox-group-reactive.component.html',
})
export class CheckboxGroupReactiveComponent {
readonly toppings = new FormControl<string[]>([], { nonNullable: true });
}
<bs-checkbox-group name="toppings" aria-label="Toppings" [formControl]="toppings">
<bs-checkbox value="cheese" class="form-check-inline">Cheese</bs-checkbox>
<bs-checkbox value="mushroom" class="form-check-inline">Mushroom</bs-checkbox>
<bs-checkbox value="olive" class="form-check-inline">Olive</bs-checkbox>
</bs-checkbox-group>
Each <tr> holds one checkbox. The attribute form bsCheckboxGroup lives on <tbody>; every checkbox below it joins the nearest group.
| Label | |
|---|---|
| Row 1 | |
| Row 2 | |
| Row 3 |
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsCheckboxComponent, BsCheckboxGroupDirective } from '@mintplayer/ng-bootstrap/checkbox';
@Component({
selector: 'app-checkbox-table',
imports: [FormsModule, BsCheckboxComponent, BsCheckboxGroupDirective],
templateUrl: './checkbox-table.component.html',
})
export class CheckboxTableComponent {
readonly rows = signal([
{ id: 'r1', label: 'Row 1' },
{ id: 'r2', label: 'Row 2' },
{ id: 'r3', label: 'Row 3' },
]);
readonly selectedRows = signal<string[]>([]);
}
<table>
<tbody bsCheckboxGroup name="rows" [(ngModel)]="selectedRows">
@for (row of rows(); track row.id) {
<tr>
<td><bs-checkbox [value]="row.id"
[inputLabel]="'Select ' + row.label" /></td>
<td>{{ row.label }}</td>
</tr>
}
</tbody>
</table>