string form value via [(ngModel)] on <bs-radio-group>, which takes role="radiogroup" and hands one name to its radios, so the browser supplies one-of-N, the single tab stop and arrow-key selection (also without JavaScript). A [name] on a <bs-radio> applies only outside a group: inside one, the group owns it.
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsRadioComponent, BsRadioGroupComponent } from '@mintplayer/ng-bootstrap/radio';
@Component({
selector: 'app-radio-group',
imports: [FormsModule, BsRadioComponent, BsRadioGroupComponent],
templateUrl: './radio-group.component.html',
})
export class RadioGroupComponent {
readonly selectedFruit = signal<string>('apple');
}
<bs-radio-group name="fruit" aria-label="Fruit" [(ngModel)]="selectedFruit">
<bs-radio value="apple">Apple</bs-radio>
<bs-radio value="banana">Banana</bs-radio>
<bs-radio value="cherry">Cherry</bs-radio>
</bs-radio-group>
Same shape via [formControl] on the group element.
import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { BsRadioComponent, BsRadioGroupComponent } from '@mintplayer/ng-bootstrap/radio';
@Component({
selector: 'app-radio-group-reactive',
imports: [ReactiveFormsModule, BsRadioComponent, BsRadioGroupComponent],
templateUrl: './radio-group-reactive.component.html',
})
export class RadioGroupReactiveComponent {
readonly selectedFruit = new FormControl<string | null>(null);
}
<bs-radio-group name="fruit" aria-label="Fruit" [formControl]="selectedFruit">
<bs-radio value="apple">Apple</bs-radio>
<bs-radio value="banana">Banana</bs-radio>
<bs-radio value="cherry">Cherry</bs-radio>
</bs-radio-group>
type="toggle_button"Radio-style button toggles (single-select among visually-button-styled options).
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsRadioComponent, BsRadioGroupComponent } from '@mintplayer/ng-bootstrap/radio';
@Component({
selector: 'app-radio-toggle-button',
imports: [FormsModule, BsRadioComponent, BsRadioGroupComponent],
templateUrl: './radio-toggle-button.component.html',
})
export class RadioToggleButtonComponent {
readonly layout = signal<string>('grid');
}
<bs-radio-group name="layout" aria-label="Layout" [(ngModel)]="layout">
<bs-radio type="toggle_button" value="grid">Grid</bs-radio>
<bs-radio type="toggle_button" value="list">List</bs-radio>
<bs-radio type="toggle_button" value="cards">Cards</bs-radio>
</bs-radio-group>
Each <tr> holds one radio. The attribute form [bsRadioGroup] sits on the <tbody>, a host the page already has; the radios find their group by DI, so they need no wiring. The size cell holds a radio list of its own: the nearest group wins, so picking a size never changes the row selection, and the other way round.
| Label | Size | |
|---|---|---|
| Row 1 | ||
| Row 2 | ||
| Row 3 |
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsRadioComponent, BsRadioGroupComponent, BsRadioGroupDirective } from '@mintplayer/ng-bootstrap/radio';
@Component({
selector: 'app-radio-table',
imports: [FormsModule, BsRadioComponent, BsRadioGroupComponent, BsRadioGroupDirective],
templateUrl: './radio-table.component.html',
})
export class RadioTableComponent {
readonly sizes = ['S', 'M', 'L'];
readonly rows = signal([
{ id: 'r1', label: 'Row 1', size: signal<string | null>('M') },
{ id: 'r2', label: 'Row 2', size: signal<string | null>(null) },
{ id: 'r3', label: 'Row 3', size: signal<string | null>('L') },
]);
readonly selectedRow = signal<string | null>(null);
}
<table>
<!-- The attribute form: a group on a host the page already has. -->
<tbody bsRadioGroup name="selectedRow" [(ngModel)]="selectedRow">
@for (row of rows(); track row.id) {
<tr>
<td><bs-radio [value]="row.id"
[inputLabel]="'Select ' + row.label" /></td>
<td>{{ row.label }}</td>
<td>
<!-- A group of its own: the nearest group wins. -->
<bs-radio-group [attr.aria-label]="'Size of ' + row.label"
[(value)]="row.size">
@for (size of sizes; track size) {
<bs-radio [value]="size" [inline]="true">{{ size }}</bs-radio>
}
</bs-radio-group>
</td>
</tr>
}
</tbody>
</table>