The angular version of the color-picker component based on antd styles.
Angular version >= 17
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> |
- |