Mode and value in Angular Color picker component

4 Apr 20233 minutes to read

Rendering palette at initial load

By default, the Picker area will be rendered at initial load. To render the Palette area while opening the ColorPicker pop-up, and specify the mode property as Palette.

In the following sample, it will render the Palette at initial load.

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

@Component({
    selector: 'app-root',
    template: `<h4>Select Color</h4>
               <input ejs-colorpicker type="color" id="element" mode="Palette" />`
})

export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ColorPickerComponent } from '@syncfusion/ej2-angular-inputs';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule
    ],
    declarations: [AppComponent, ColorPickerComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Color value

The value property can be used to specify the color value to the ColorPicker. It supports either three or six digit hex codes. To include opacity, set the color value as four or eight digit hex code.

In the following sample, the color value sets as four digit hex code, the last digit represents the opacity value.

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

@Component({
    selector: 'app-root',
    template: `<h4>Choose Color</h4>
               <!-- To set color value. -->
               <input ejs-colorpicker type="color" id="element" value="035a" />`
})

export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ColorPickerComponent } from '@syncfusion/ej2-angular-inputs';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule
    ],
    declarations: [AppComponent, ColorPickerComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

The value property supports hex code with or without # prefix.

See Also