BoldDesk®Customer service software offering ticketing, live chat, and omnichannel support, starting at $49/mo. for 10 agents. Try it for free.
|
<input ejs-colorpicker #color id="color-picker" type="color" />
<button ejs-button id="btn" (click)="click()">Normal</button>
|
|
@ViewChild("color")
public colorObj: ColorPickerComponent;
click() {
this.colorObj.toggle();
}
|
|
@ViewChild("color")
public colorObj: ColorPickerComponent;
@ViewChild("dropdownbtn")
private ddb: DropDownButtonComponent;
public onOpen(args: any): void {
args.element.parentElement
.querySelector(".e-cancel")
.addEventListener("click", this.closePopup.bind(this));
}
public onClose(args: any): void {
args.element.parentElement
.querySelector(".e-cancel")
.removeEventListener("click", this.closePopup.bind(this));
}
public closePopup(): void {
this.ddb.toggle();
}
// Triggers while selecting colors from color picker.
public change(args: ColorPickerEventArgs): void {
this.closePopup();
}
<h4>Choose color</h4>
<input ejs-colorpicker type="color" id="element" [inline]="true" (change)="change($event)" />
<button ejs-dropdownbutton #dropdownbtn id="dropdownbtn" (open)="onOpen($event)" (beforeClose)="onClose($event)" target=".e-colorpicker-wrapper"> Custom Color</button>
/* // To hide caret icon */
.e-btn-icon.e-caret {
display: none;
}
|
