Angular Material Color Picker
npm install @angular-material-components/color-picker
npm install --save @angular-material-components/color-picker
`
Setup
`
import { MAT_COLOR_FORMATS, NgxMatColorPickerModule, NGX_MAT_COLOR_FORMATS } from '@angular-material-components/color-picker';
@NgModule({
...
imports: [
...
NgxMatColorPickerModule
],
providers: [
{ provide: MAT_COLOR_FORMATS, useValue: NGX_MAT_COLOR_FORMATS }
],
...
})
export class AppModule { }
`
@see src/app/demo-colorpicker/demo-colorpicker.module.ts
Using the component
$3
`
`
#### List of @Input
| @Input | Type | Default value | Description |
|--------------- |---------- |--------------- |---------------------------------------------------------------------- |
| disabled | boolean | null | If true, the picker is readonly and can't be modified |
| touchUi | boolean | false | Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather than a popup and elements have more padding to allow for bigger touch targets. |
Theming
- @see @angular/material Using a pre-built theme
- Add the Material Design icon font to your index.html
`
``