How to set RGBA value to the ColorPicker in Angular?

2 mins read

Overview

The Syncfusion Angular ColorPicker component is a user-friendly interface for selecting and adjusting color values. In scenarios where you need to set the color dynamically, it is important to note that the ColorPicker component accepts HEX color values for its value property. This article demonstrates how to convert RGBA color values to HEX and update the ColorPicker’s value using Angular’s patchValue method.

Converting RGBA to HEX

To convert RGBA values to a HEX color code, you can use the following utility functions within your Angular component:

public hex(x: number): string {
    return ('0' + x.toString(16)).slice(-2);
}

public rgbToHex(rgb: number[]): string {
    return rgb.length ? ('#' + this.hex(rgb[0]) + this.hex(rgb[1]) + this.hex(rgb[2]) +
        (rgb[3] !== undefined && rgb[3] !== 0 ? (Math.round(rgb[3] * 255) + 0x10000).toString(16).substr(-2) : '00')) : '';
}

Updating the ColorPicker Value

After converting the RGBA values to HEX, you can update the ColorPicker’s value in the ngAfterViewInit lifecycle hook as follows:

ngAfterViewInit(e: any): void {
    setTimeout(() => {
        this.hexValue = this.rgbToHex([189, 43, 43, 0.41]);
        this.formGroup.get("test").patchValue(this.hexValue);
    }, 100);
}

HTML Template

In your HTML template, bind the ColorPicker to a form control within a form group:

<div class="row">
    <h4>Choose a color</h4>
    <form [formGroup]="formGroup">
        <input ejs-colorpicker id='color-picker' formControlName='test' #colorpicker type='color'/>
    </form>
</div>

Demo

To see a working example of the ColorPicker component with HEX value integration, visit the following demo link:

Syncfusion ColorPicker Demo

Conclusion

By following the steps outlined above, you can successfully integrate RGBA to HEX conversion for the Syncfusion ColorPicker component in your Angular applications. If you require further assistance, please refer to the Syncfusion documentation or contact their support team.

Additional References

Conclusion
I hope you enjoyed learning about how to set RGBA value to the Syncfusion ColorPicker in Angular.

You can refer to our Angular ColorPicker feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular ColorPicker example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)