Render palette alone in Angular Color picker component

26 Feb 20261 minute to read

To render only the Palette area in the ColorPicker, set the mode property to Palette and the modeSwitcher property to false.

In the following sample, the showButtons property is set to false to hide the control buttons, displaying only the palette area.

app.component.ts

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>Select Color</h4>
               <!-- To render Picker. -->
               <ejs-input ejs-colorpicker type="color" id="element" mode="Palette" [modeSwitcher]="false" [showButtons]="false" /></div>`
})

export class AppComponent { }

main.ts

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

To render only the Picker area, set the mode property to Picker.