ngx-colors
#455a64
Slide-In animations & Default palette
#c2185b
Popup animations & Custom palette
ngx-colors is a colorpicker component of angular with a material design style, allows users to select a color via text input (hexadecimal, rgba, hsla), choosing a preset color from the palette, or a color picker using the Hue, Lightness, and Alpha sliders.
It is composed of two parts:npm install @angular/animations
npm install ngx-colors
import { NgxColorsModule } from 'ngx-colors';
@NgModule({
...
imports: [
...
NgxColorsModule
]
})
<ngx-colors ngx-colors-trigger [(ngModel)]="leftColor"></ngx-colors>
<mat-form-field>
<input matInput [(ngModel)]="leftColor">
</mat-form-field>
<form class="example-form">
<ngx-colors ngx-colors-trigger style="display: inline-block; margin:5px;" [formControl]="colorFormControl"></ngx-colors>
</form>
Value: {{ colorFormControl.value }}
Try it out here: