ColorPicker - update preview on changing color

[Peter Linecker]

Hello Syncfusion-Team,

Is it possible to update the color of the preview when hovering on the dropdown to pick a color?

For example on this screenshot the initial color of the preview is white and when I pick the color red it only updates on letting go of the picker. It would be cool if the preview would update every time I am moving the picker in the popup.

Kind Regards, Peter

[YuvanShankar Arunagiri]

Hi Peter,

We have validated your reported query and prepared the sample based on your requirement. We can achieve your requirement by using the change event and showButtons property of the color picker. Please refer the below code snippet and API link.

API link: https://ej2.syncfusion.com/angular/documentation/api/color-picker#change

[app.component.ts]:

onChange(args) {

        (this.clrPkrObj.element.nextElementSibling.querySelector('.e-split-preview') as HTMLElement).style.backgroundColor = args.currentValue.rgba;

    }

[app.component.html]:

<input ejs-colorpicker #colorpicker type='color' [showButtons]="false" (change)="onChange($event)"/>

Sample link: https://stackblitz.com/edit/angular-1htfwj?file=app.component.ts,app.component.html

Could you please check the above sample and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A