Neanderthal Painting Monet

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

    14.0.1 • 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

    Choose the version corresponding to your Angular version:

    Angular @angular-material-components/color-picker
    10 4.x+
    9 2.x+
    8 2.x+
    7 2.x+
    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 @majesnix/color-picker

    DownloadsWeekly Downloads

    63

    Version

    14.0.1

    License

    MIT

    Unpacked Size

    582 kB

    Total Files

    50

    Last publish

    Collaborators

    • majesnix