bs-select is a styled drop-down bound through [(ngModel)] (or any reactive-forms control). Project plain <option> elements with [ngValue] to bind arbitrary objects as the selected value.
null
<bs-select [(ngModel)]="selected">
<option [ngValue]="null" selected>Choose a dish</option>
@for (dish of dishes; track dish.id) {
<option [ngValue]="dish">{{ dish.name }}</option>
}
</bs-select>
import { Component, model } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsSelectComponent, BsSelectOption } from '@mintplayer/ng-bootstrap/select';
interface Dish { id: number; name: string; }
@Component({
selector: 'my-select-demo',
templateUrl: './my-select-demo.component.html',
imports: [FormsModule, BsSelectComponent, BsSelectOption],
})
export class MySelectDemoComponent {
readonly selected = model<Dish | null>(null);
readonly dishes: Dish[] = [
{ id: 1, name: 'Salmon' },
{ id: 2, name: 'Spaghetti' },
{ id: 3, name: 'Lasagna' },
];
}
Template-driven [(ngModel)] and reactive [formControl] both bind through the component's ControlValueAccessor: the value, the disabled state, and touched when focus leaves.
"m""m"
<!-- template-driven (FormsModule) -->
<bs-select [(ngModel)]="value" aria-label="Size">
<option value="">Pick a size</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</bs-select>
<!-- reactive (ReactiveFormsModule): control = new FormControl(...) -->
<bs-select [formControl]="control" aria-label="Size">
<option value="">Pick a size</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</bs-select>