Nanananananananana.. Pat Man!
Have ideas to improve npm?Join in the discussion! »

@angular-material-components/color-picker
TypeScript icon, indicating that this package has built-in type declarations

5.0.2 • Public • Published

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

Build Status License npm version

Description

An Angular Material Color Picker.

button

DEMO

@see DEMO stackblitz

Alt Text

Choose the version corresponding to your Angular version:

Angular @angular-material-components/color-picker
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

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

@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

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

License

MIT

Install

npm i @angular-material-components/color-picker

DownloadsWeekly Downloads

871

Version

5.0.2

License

MIT

Unpacked Size

753 kB

Total Files

53

Last publish

Collaborators

  • avatar