The angular version of the color-picker component based on antd styles.
Angular version >= 17 ![npm package](https://camo.githubusercontent.com/cbcd6d0b958f2bc33c39d8ff12821d630f4cdb9570d78db585695052cacf4cb8/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6e706d2d6c617465737425323076657273696f6e2d253233313839306666)
npm install ng-antd-color-picker
standalone:
import { NgAntdColorPickerComponent, NgAntdColorBlockComponent } from 'ng-antd-color-picker';
module:
import { NgAntdColorPickerModule } from 'ng-antd-color-picker';
<ng-antd-color-picker></ng-antd-color-picker>
<ng-antd-color-block color="#ff6600"></ng-antd-color-block>
-
Basic
-
Custom Header / Footer
-
Color Block
Parameter |
Description |
Type |
Default |
[value] |
Value of color |
string |ColorValue
|
- |
[defaultValue] |
Default value of color |
string |ColorValue
|
- |
[disabled] |
Disable ColorPicker |
boolean |
false |
[disabledAlpha] |
Disable Transparency |
boolean |
false |
[panelRenderHeader] |
Set the header of the color picker |
TemplateRef<void> |
- |
[panelRenderFooter] |
Set the tail of the color picker |
TemplateRef<void> |
- |
(nzOnChange) |
Callback when value is changed |
EventEmitter<{ color: Color; type?: HsbaColorType }> |
- |
(nzOnChangeComplete) |
Called when clear |
EventEmitter<HsbaColorType> |
- |
Parameter |
Description |
Type |
Default |
[color] |
Module colors |
string |
#1677ff |
[nzOnClick] |
Callbacks for clicking on color blocks |
EventEmitter<boolean> |
- |