How to create one function to insert a word when I click on it in Angular .kendo context menu-CodePudding

I'm having trouble figuring out how I'm going to be able to insert a word when click on it from the context menu, my code is this : public items: component.ts

<html>
<a> any[] = [
      {
        text: "hello",
        items: [{ text: "Item1.1" }, { text: "Item1.2" }],
      },
      {
        text: "Item2",
        
      },
      {
        text: "hello2",
      }] </a></html>

and my context menu :

I wanted, for example, to press hello2 and it would write where I clicked with the mouse.

CodePudding user response：

When you define your items in the component's typescript file, assign the data property to the value you wish to insert. Then declare a function that gets the item:

items: any[] = [
  {
    text: 'hello',
    items: [
      {
        data: 'Item1.1',
        text: "Item1.1"
      },
      {
        data: 'Item1.2',
        text: "Item1.2"
      }
    ],
    // etc...
];

function menuSelect(e: any): void {
  const data = e.item?.data;
  console.log(data); // do something with data
}

Then when you define your kendo-menu, bind the items property (documentation) to respective variable and the menuSelectEvent (documentation) to the respective function:

<kendo-menu [items]="items" (select)="menuSelect($event)">
</kendo-menu>

CodePudding user response：

HTML:

<button (onclick)="BtnClicked()">Hello</button>
<p>{{printValue}}</p>

Component:

BtnClicked(){ string printValue = "Context"; }