HelpBot Assistant

How can I help you?

Customize colorpicker in Angular Color picker component

26 Feb 202621 minutes to read

Custom palette

By default, the ColorPicker palette displays a set of predefined colors. To load custom colors, specify them in the presetColors property. To apply custom styling to palette tiles, use the BeforeTileRender event to add custom CSS classes.

The following sample demonstrates the above functionalities.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component } from '@angular/core';
import { PaletteTileEventArgs, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
import { addClass } from '@syncfusion/ej2-base';

@Component({
imports: [
         FormsModule, ColorPickerModule
    ],


standalone: true,
    selector: 'app-root',
    template: ` <div class="e-section-control">
                <div id="preview"></div>
               <h4>Select Color</h4>
               <ejs-input ejs-colorpicker type="color" id="element" value="#ba68c8" mode="Palette" [columns]="colCount" [inline]="true" [modeSwitcher]="false" [showButtons]="false" [presetColors]="customColors" (beforeTileRender)="tileRender($event)" (change)="onChange($event)" />
               </div>`
})

export class AppComponent {
        public tileRender(args: PaletteTileEventArgs): void {
            addClass([args.element], ['e-icons', 'e-custom-tile']);
        }

        // To specify number of columns to be rendered.
        public colCount: number = 4;

        // Triggers while selecting colors from palette.
        public onChange(args: ColorPickerEventArgs): void {
            (document.getElementById('preview') as HTMLElement).style.backgroundColor = args.currentValue.hex;
        }

        // Triggers before rendering each palette tile.
        public customColors: { [key: string]: string[] } = {
                'custom1': ['#ef9a9a', '#e57373', '#ef5350',
                        '#f44336', '#f48fb1', '#f06292',
                        '#ec407a', '#e91e63', '#ce93d8',
                        '#ba68c8', '#ab47bc', '#9c27b0',
                        '#b39ddb', '#9575cd', '#7e57c2', '#673AB7'],
                'custom2': ['#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5',
                        '#90CAF9', '#64B5F6', '#42A5F5', '#2196F3',
                        '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4',
                        '#80DEEA', '#4DD0E1', '#26C6DA', '#00BCD4'],
                'custom3': ['#80CBC4', '#4DB6AC', '#26A69A', '#009688',
                        '#A5D6A7', '#81C784', '#66BB6A', '#4CAF50',
                        '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#E6EE9C',
                        '#DCE775', '#D4E157', '#CDDC39']
        };

        ngOnInit(): void {
            (document.getElementById('preview') as HTMLElement).style.backgroundColor = "#ba68c8"
        }
 }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Hide input area from picker

By default, the input area will be rendered in ColorPicker. To hide the input area from it, add e-hide-value class to ColorPicker using the cssClass property.

In the following sample, the ColorPicker is rendered without input area.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs'
import { enableRipple } from '@syncfusion/ej2-base'



import { Component } from '@angular/core';

@Component({
imports: [
         FormsModule, ColorPickerModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <h4>Choose Color</h4>
               <!-- To hide the value area. -->
               <ejs-input ejs-colorpicker type="color" id="element" cssClass="e-hide-value" [modeSwitcher]="false" /></div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom handle

The ColorPicker handle shape and appearance can be customized using CSS or custom SVG elements. In the following sample, the handle is styled with an SVG icon. The same approach can be applied to create other custom handle designs based on specific requirements.

The following sample show the customized color picker handle.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { ColorPickerComponent, ColorPickerModule } from '@syncfusion/ej2-angular-inputs'



import { Component } from '@angular/core';
import { OpenEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
imports: [
        FormsModule, ColorPickerModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <h4>Choose Color</h4>
               <!-- custom picker -->
               <ejs-input ejs-colorpicker type="color" id="element" value="#344aae" cssClass="e-custom-picker" [modeSwitcher]="false" (open)="onOpen($event)" /></div>`
})

export class AppComponent {
    onOpen(args: OpenEventArgs): void {
        (args.element.querySelector('.e-handler') as Element).classList.add('e-icons');
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom primary button

By default, the ColorPicker’s primary button displays the selected color. You can customize the button to display an icon instead.

In the following sample, a picker icon is added to the primary button. The change event updates the selected color in the bottom portion of the icon.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs'



import { Component, ViewChild } from '@angular/core';
import { addClass } from '@syncfusion/ej2-base';
import { ColorPickerEventArgs, ColorPickerComponent } from '@syncfusion/ej2-angular-inputs';

@Component({
imports: [
        FormsModule, ColorPickerModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <h4>Choose color</h4>
               <ejs-input ejs-colorpicker #colorpicker id="element" (change)="onChange($event)" /></div>`
})

export class AppComponent {
    @ViewChild('colorpicker')
    private colorPicker?: ColorPickerComponent;

    public onChange(args: ColorPickerEventArgs): void {
        const colorPickerElement = this.colorPicker?.element;
        if (colorPickerElement) {
            const nextSibling = colorPickerElement.nextElementSibling;
            if (nextSibling) {
                const selectedColorElement = nextSibling.querySelector('.e-selected-color') as HTMLElement;
                if (selectedColorElement) {
                    selectedColorElement.style.borderBottomColor = args.currentValue.rgba;
                }
            }
        }
    }

    ngOnInit(): void {
        setTimeout(() => {
            addClass([(this.colorPicker!.element as any).nextElementSibling.querySelector('.e-selected-color')], 'e-icons');
        }, 500);
    }
 }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The Essential® JS 2 provides a set of icons that can be loaded by applying e-icons class name to the element. You can also use third party icon to customize the primary button.

Display hex code in input

The ColorPicker’s input element can be displayed in place of the primary button, allowing direct visualization of the selected color’s hex code. The input automatically updates with the applied color value.

The following sample shows the color picker with input.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs'



import { Component, ViewChild } from '@angular/core';
import { ColorPickerComponent } from '@syncfusion/ej2-angular-inputs';

@Component({
imports: [
         FormsModule, ColorPickerModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <h4>Choose color</h4>
               <ejs-input ejs-colorpicker #colorpicker id="element" readonly /></div>`
})

export class AppComponent {
    @ViewChild('colorpicker')
    public colorPicker?: ColorPickerComponent;

    ngOnInit(): void {
        this.colorPicker!.element.type = 'text';
        this.colorPicker!.element.classList.add('e-input');
        setTimeout(() => {
            let proxy: any = this;
            let target: HTMLElement = proxy.colorPicker.element.nextElementSibling;
            target.insertBefore(proxy.colorPicker.element, target.children[1]);
        }, 500);
    }
 }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom UI

The ColorPicker UI can be customized extensively to match specific design requirements. The following sample demonstrates an Excel-like UI customization using the SplitButton and Dialog components. When the “More colors” option is selected from the palette, a dialog opens with the ColorPicker component.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs'
import { DialogModule } from '@syncfusion/ej2-angular-popups'
import { SplitButtonModule } from '@syncfusion/ej2-angular-splitbuttons'



import { Component, ViewChild } from '@angular/core';
import { ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
import { EmitType, formatUnit } from '@syncfusion/ej2-base';
import { ItemModel, MenuEventArgs, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-splitbuttons';
import { ColorPickerComponent } from '@syncfusion/ej2-angular-inputs';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { SplitButtonComponent } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
imports: [
        FormsModule, ColorPickerModule, DialogModule, SplitButtonModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="e-section-control">
                <h4>Select Color</h4>
                <ejs-input ejs-colorpicker #colorpalette type="color" id="colorpalette" cssClass="e-hide-palette" mode="Palette" [inline]="true" [showButtons]="false" [modeSwitcher]="false" (change)="paletteOnChange($event)" />
                <ejs-splitbutton #splitbutton iconCss="e-icons e-font-icon" [items]="items" (beforeClose)="onBeforeClose($event)" (beforeItemRender)="beforeRender($event)" (select)="onSelect($event)"></ejs-splitbutton>
                <ejs-dialog id="modalDialog" #modalDialog cssClass="e-dlg-picker" (open)="modalDlgOpen()" [isModal]="true" [width]="width" [height]="height" [visible]="false" [target]='target' [animationSettings]='animationSettings'
                (overlayClick)="dlgClose()">
                    <ng-template #content>
                        <ejs-input ejs-colorpicker #colorpicker type="color" id="colorpicker" (change)="pickerOnChange($event)" [inline]="true" [modeSwitcher]="false" />
                    </ng-template>
                </ejs-dialog>
                </div>`
})
export class AppComponent {
    @ViewChild('colorpalette')
    public colorPalette?: ColorPickerComponent;
    @ViewChild('colorpicker')
    public colorPicker?: ColorPickerComponent;
    @ViewChild('modalDialog')
    public modalDialog?: DialogComponent;
    @ViewChild('splitbutton')
    public splitBtn?: SplitButtonComponent;

    public items: ItemModel[] = [
        {
            text: ''
        },
        {
            text: "More Colors...",
            iconCss: "e-switcher"
        }
    ];

    public target: string = ".wrap";
    public width: string = '270px';
    public height: string = '336px';
    public animationSettings: Object = { effect: 'Zoom' };

    public beforeRender(args: MenuEventArgs): void {
        if (args.item.text === "") {
            this.colorPalette!.cssClass = "";
            this.colorPalette?.dataBind();
            this.colorPalette?.refresh();
            args.element.appendChild((this.colorPalette as any).element.parentElement);
        }
    }

    public modalDlgOpen: EmitType<object> = () => {
        this.colorPicker?.refresh();
        ((this.colorPicker as any)?.element.parentElement).querySelector('.e-ctrl-btn .e-cancel').addEventListener('click', this.dlgClose);
    }

    public onBeforeClose(args: BeforeOpenCloseMenuEventArgs): void {
        document.body.appendChild((this.colorPalette as any).element.parentElement);
        this.colorPalette!.cssClass = "e-hide-palette";
        this.colorPalette?.dataBind();
    }

    public dlgClose: any = (args: any) => {
        this.modalDialog?.hide();
    }

    public pickerOnChange(args: ColorPickerEventArgs): void {
        this.paletteOnChange(args);
        this.modalDialog?.hide();
    }

    public paletteOnChange(args: ColorPickerEventArgs): void {
        ((this.splitBtn as SplitButtonComponent).element.querySelector(".e-font-icon") as HTMLElement).style.borderBottomColor = args.currentValue.rgba;
    }

    public onSelect(args: MenuEventArgs): void {
        if (args.item.text === 'More Colors...') {
            this.modalDialog?.show();
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));