bs-color-picker is a hue/saturation wheel over native brightness and alpha sliders. It integrates with Angular forms ([(ngModel)], [formControl]) on its hex value; [(alpha)] runs from 0 to 1.
The wheel is a focusable slider: the left and right arrows turn the hue (Page Up/Down by 30°), up and down change the saturation, Home and End jump to full and no saturation, and Shift makes each step finer. The switch below the picker reveals plain hue and saturation sliders, so every channel has a one-dimensional control; [showAccessibilityToggle]="false" hides it.
<bs-color-picker [(ngModel)]="color"></bs-color-picker>
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BsColorPickerComponent } from '@mintplayer/ng-bootstrap/color-picker';
@Component({
selector: 'my-color-picker-demo',
templateUrl: './my-color-picker-demo.component.html',
imports: [FormsModule, BsColorPickerComponent],
})
export class MyColorPickerDemoComponent {
protected color = '#0000FF';
}
[(ngModel)] - Supports the FormsModule Template-driven [(ngModel)] and reactive [formControl] both bind through the component's ControlValueAccessor: the value, the disabled state, and touched when focus leaves.
"#0d6efd""#0d6efd"
<!-- template-driven (FormsModule) -->
<bs-color-picker [(ngModel)]="value"></bs-color-picker>
<!-- reactive (ReactiveFormsModule): control = new FormControl(...) -->
<bs-color-picker [formControl]="control"></bs-color-picker>