How to hide control buttons in Angular Color Picker

25 Sep 20261 minute to read

The Angular Color Picker 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.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';
bootstrapApplication(AppComponent).catch((err) => console.error(err));