Render palette alone in Angular Color picker component

16 Jun 20231 minute to read

To render the Palette alone in ColorPicker, specify the mode property as Palette, and set the modeSwitcher property to false.

In the following sample, the showButtons property is disabled to hide the control buttons and it renders only the Palette area.

app.component.ts

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

@Component({
    selector: 'app-root',
    template: `<h4>Select Color</h4>
               <!-- To render Picker. -->
               <ejs-input ejs-colorpicker type="color" id="element" mode="Palette" [modeSwitcher]="false" [showButtons]="false" />`
})

export class AppComponent { }

app.module.ts

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

enableRipple(true);

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, ColorPickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

To render Picker alone specify the mode property as ‘Picker’.