8.0.0 • Published 3 months ago

@angular-material-components/color-picker v8.0.0

Weekly downloads
1,068
License
MIT
Repository
github
Last release
3 months ago

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

Build Status License npm version

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
148.x+
137.x+
126.x+
115.x+
104.x+
92.x+
82.x+
72.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

Color Picker (ngx-mat-color-picker)

<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

@InputTypeDefault valueDescription
disabledbooleannullIf true, the picker is readonly and can't be modified
touchUibooleanfalseWhether 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

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

License

MIT

8.0.0

3 months ago

7.0.0

11 months ago

7.0.1

11 months ago

6.0.0

1 year ago

5.0.2

2 years ago

4.0.4

2 years ago

4.0.3

2 years ago

5.0.1

2 years ago

5.0.0

2 years ago

5.0.0-beta.1

2 years ago

4.0.2

2 years ago

4.0.1

2 years ago

4.0.1-beta.1

2 years ago

4.0.0

2 years ago

4.0.0-beta.1

2 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.0.1

3 years ago

1.0.0-beta.1

3 years ago