Open url in new tab based on data in service in Kendo Menu

Question

I searched around number of posts, but haven't any solution applicable to my scenario. I am population kendo-menu dynamically using an array build via sql.

<kendo-menu [items]="items"
            [vertical]="true"
            style="display:inline-block;">
</kendo-menu>

This is the sample I am following:

https://www.telerik.com/kendo-angular-ui/components/menus/menu/vertical/

Here is how items array is structured:

export const items: any[] = [
  {
  text: 'Reportingd',
    items: [{ text: 'Dash', url: "https://www.google.com" },  {
    text: 'Realtime',
      items: [{ text: 'DesktopNew', url: "https://www.telerik.com" }, { text: 'laptop', url: "https://www.msn.com" }]
  }]
},
{
  text: 'Other Reporting',
  items: [{ text: 'Training', url: "https://www.msn.com" }, { text: 'UserManual', url: "https://www.msn.com" }, { text: 'Guide',
    items: }]
},
{
  text: 'Tools',
  items:[{ text: 'Training', url: "https://www.msn.com" }]
}];

However, this on click of menu/sub-menu opens url in the same window. I want to open in different window or new tab. HTML <a> tag does not work here. Please suggest

<a href="https://www.thesitewizard.com/" target="_blank">thesitewizard.com</a>

Answer 1

Write select event for kendo menu something like below.

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

After that in onSelect method use window.open method like below.

public onSelect({ item }): void {
        if (!item.items) {
            window.open([item.url], "_blank");
        }
    }