Angular Material Color Picker for @angular/material 7.x, 8.x, 9.x, 10.x, 11.x, 12.x, 13.x, 14.x, 15.x, 16.x


Description

An Angular Material Color Picker.

DEMO

@see DEMO stackblitz

!Alt Text

Choose the version corresponding to your Angular version:

Angular | @angular-material-components/color-picker
----------- | -------------------
16 | 16.x+
15 | 15.x+ OR 9.x+ for legacy import
14 | 8.x+
13 | 7.x+
12 | 6.x+
11 | 5.x+
10 | 4.x+
9 | 2.x+
8 | 2.x+
7 | 2.x+

Getting started

``
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
`

``

License

MIT