Category / Section
How to add reset color option and change default color in color picker.
1 min read
Description
This knowledge base explains how to change the default color and add the reset color option in color picker.
Solution
It can be achieved by adding button element with css classes e-small e-flat e-resetbtn and adding the button click function to the reset button which changes to the default color value.
Changing the default color in the color picker is achieved by adding the value property to the input element. The added color will remain as a default value.
[HTML]
<div class="row"> <h4>Choose a color</h4> <button #flatbtn ejs-button id="flatbtn" title="Reset" cssClass="e-small e-flat e-resetbtn" (click)="resetBtnClick()">Reset</button> <input #colorpicker ejs-colorpicker id='color-picker' [value]="colorValue" type='color' (open)="Open($event)"/> </div>
[TS]
import { Component, ViewChild } from '@angular/core';
import { ColorPickerComponent, OpenEventArgs } from '@syncfusion/ej2-angular-inputs';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
/**
* Adding reset button & changing default color sample
*/
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
@ViewChild('flatbtn')
public flatbtn: ButtonComponent;
@ViewChild("colorpicker")
public colorpicker: ColorPickerComponent;
/** Default color value is set */
public colorValue: string = '#0db1e7';
public Open(args: OpenEventArgs): void {
let applyBtn = (args.element.parentElement).querySelector('.e-ctrl-btn') as HTMLElement;
applyBtn.appendChild(this.flatbtn.element);
this.flatbtn.element.style.display = "inline";
}
/** Reset button click function is called */
public resetBtnClick(): void {
this.colorpicker.value = this.colorValue;
/** Closing color picker popup */
this.flatbtn.element.click = this.colorpicker.closePopup();
}
}
Demo Sample: https://stackblitz.com/edit/angular-62rteg-p5rymv?embed=1&file=app.component.html
