Hide control buttons in Angular Color picker component

26 Feb 20261 minute to read

The ColorPicker can be configured to hide the control buttons (Apply and Cancel). When buttons are hidden, selecting a color immediately applies the selection and closes the popup. To hide control buttons, set the showButtons property to false.

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>Choose Color</h4>
               <!-- To hide control buttons. -->
               <ejs-input ejs-colorpicker type="color" id="element" [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));