Angular Material Color Picker

For Angular Material 21.x

Description

This is a Color Picker for Angular Material projects.

Version control

Choose the version corresponding to your Angular version:

| Angular | @ngx-mce/datetime-picker | | -------- | -------------------------| | 21 | 21.x | | 15 -- 20 | Please use GNURub's version | | 7 -- 14 | Please use h2qutc's version |

Color Picker in action

See demo here.

How to use

Install

npm install --save  @ngx-mce/color-picker

Configure

import { MAT_COLOR_FORMATS, NgxMatColorPickerModule, NGX_MAT_COLOR_FORMATS } from '@ngx-mce/color-picker';

@NgModule({
   ...
   imports: [
        ...
        NgxMatColorPickerModule
   ],
   providers: [
    { provide: MAT_COLOR_FORMATS, useValue: NGX_MAT_COLOR_FORMATS }
   ],
   ...
})
export class AppModule { }

Check more details here.

Using the component

<mat-form-field>
    <input matInput [ngxMatColorPicker]="picker" [formControl]="colorCtr" [disabled]="disabled">
    <ngx-mat-color-toggle matSuffix [for]="picker"></ngx-mat-color-toggle>
    <ngx-mat-color-picker #picker [touchUi]="touchUi" [color]="color"></ngx-mat-color-picker>
</mat-form-field>

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">

License

MIT