How do I add a ColorPicker to a ContextMenu?

[Anthony]

Hello:

I need to show a color picker in a context menu. How can I achieve this? Also, how do I display any angular component in a ContextMenu?

Thank you.

[YuvanShankar Arunagiri]

Hi Anthony,

We have checked your reported query and prepared the sample based on your requirement. Please refer to the below code snippet and sample link. Using the beforeItemRender event, we can customize the menu item shown as below.

UG link: https://ej2.syncfusion.com/documentation/context-menu/template-and-multilevel-nesting/#template

<ejs-contextmenu #contextmenu target='#contextmenutarget' [items]='menuItems' (beforeItemRender)='onItemRender($event)'></ejs-contextmenu>

…………………….

public onItemRender (args: MenuEventArgs) {

        let colorPicker: ColorPicker = new ColorPicker({ 

            value: '#008000', mode: 'Picker', modeSwitcher: false, showButtons: false, inline: true,

            change: (e :any) => {

                console.log(e.value);

            }

        });

        let firstSpan: HTMLElement = createElement('span');

        const inputElem: HTMLElement = createElement('input', { className: 'e-input', attrs: { type: 'text' }});

        firstSpan.appendChild(inputElem);

        colorPicker.appendTo(inputElem);

        args.element.appendChild(firstSpan);

    }

Sample link: https://stackblitz.com/edit/angular-dvctza?file=src%2Fapp.component.ts

Get back to us if you need any further assistance on this. 

Regards,

YuvanShankar A

[Anthony]

Thanks for the solution. I have everything working.

[YuvanShankar Arunagiri]

You are welcome, Anthony. We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any other assistance.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.