ColorPicker Module Name: ColorPickerModule

Module Name: ColorPickerModule

ColorPicker is a field with color palets that overlay it and return the selected color.

Showcase
Inline
HEX
<tl-colorpicker [mode]="'inline'" [returnFormatColor]="true" [ngModel]="'#5EC791'" (selectColor)="onSelectColor($event)"></tl-colorpicker>
Input
<tl-colorpicker [mode]="'input'" [returnFormatColor]="true" [openFocus]="true" [ngModel]="'#f44336'" (selectColor)="onSelectColor($event)"></tl-colorpicker>
Copy Button
<tl-colorpicker [mode]="'input'" [copyButton]="true" [recentColors]="true" [ngModel]="'#9c27b0'" [returnFormatColor]="true" [openFocus]="true" (selectColor)="onSelectColor($event)"></tl-colorpicker>
Label
<tl-colorpicker [mode]="'input'" [label]="'Color Picker'" [labelSize]="'100px'" [ngModel]="'#3f51b5'" [recentColors]="true" [returnFormatColor]="true" [openFocus]="true" (selectColor)="onSelectColor($event)"></tl-colorpicker>
From Origin
<tl-colorpicker [mode]="'fromOrigin'" [elementOrigin]="button" [recentColors]="true" [ngModel]="'#2196f3'" [returnFormatColor]="true" (selectColor)="onSelectColor($event)"></tl-colorpicker>
Only Color
<tl-colorpicker [mode]="'onlyColor'" [recentColors]="true" [returnFormatColor]="true" [ngModel]="'#4caf50'" (selectColor)="onSelectColor($event)"></tl-colorpicker>
Properties
NameTypeDefaultDescriptionOptions
copyButtonbolleanfalseDisplay copy button. true | false
elementOriginelementnullDefine a element of origin. variable local
labelstringnullCreate a label together with Input Element any text
labelSizestring100pxWidth of label text px | % | em
modestringinputDefine a view. inline | onlyColor | fromOrigin | input
recentColorsbolleanfalseDisplay recent colors. true | false
returnFormatColorbolleanfalseDisplay color code. true | false
Events
NameParametersDescription
selectColor
selected : Color Selected
Dispatched when a color is selected.