ejs-menu combined with RouterModule seems to be not possible.

[Murat BESER]

Hi, thank you very much for this awesome library. Currently I'm creating a sidebar. 

by default ej-menu has an property called `url` but this property is not using angular's RouterModule. I did look into documentation I wasn't able to find a way to communicate with RouterModule so I decided to use `select` event. 

Yet my attempt was unsuccessful.  here the code snippet 

template

-------------------------------------------------------------

<ejs-menu id="dockMenu"

          [items]="menuItems"

          (select)="select($event)"

          orientation='Vertical'

></ejs-menu>

------------------------------------------------------------------------

// did try with async await also

 select(args: any) {

        const {path} = args.item;

        if (path) {

        this.router.navigate(path)

                .then((navi) => {

                    console.log("Navigate", navi)

                }).catch(

                    (error) => {

                        console.log("error", error);

                    }

                );

        }

}

-----------------------------------

and I do get error message as 

----------------------------------------- 

ERROR TypeError: commands.reduce is not a function

    RxJS 4

        computeNavigation

        createUrlTreeFromSegmentGroup

        createUrlTree

        navigate

    select aside.component.ts:121

    AsideComponent_Template_ejs_menu_select_3_listener aside.component.html:8

    RxJS 8

    trigger Angular

    clickHandler ej2-navigations.es5.js:2467

    invokeTask Angular

    onInvokeTask RxJS

    invokeTask Angular

    onInvokeTask RxJS

    Angular 8

    onScheduleTask RxJS

    Angular 6

    add ej2-base.es5.js:4750

    wireEvents ej2-navigations.es5.js:1376

    render ej2-navigations.es5.js:1277

    appendTo ej2-base.es5.js:7385

    Angular 4

    onInvokeTask RxJS

    invokeTask Angular

    onInvokeTask RxJS

    Angular 7

    onScheduleTask RxJS

    Angular 10

    RxJS 17

core.mjs:10176:22

[YuvanShankar Arunagiri]

Hi Murat,

We have checked your reported query and prepared the sample based on your requirement. We can achieve your requirement by two ways.

1. Set the URL property to menu items and using the select event of menu, we can navigate to respected page.

<ejs-menu id="dockMenu" [items]="menuItems" orientation='Vertical' cssClass='dock-menu' (select)="clickHandler($event)"></ejs-menu>

……

clickHandler(args: any) {

    if(args.item) {

      this.router.navigate(args.item.url.split('/'));

    }

  }

1. Using the template feature of menu component, we can directly navigate to respected page.

<ejs-menu id="dockMenu" [items]="menuItems" orientation='Vertical' cssClass='dock-menu'>

            <ng-template #template let-dataSource>

              <span>

               <a class="e-menu-text" [routerLink]="[dataSource.url]">{{ dataSource.text }}</a>

             </span>

            </ng-template>

          </ejs-menu>

Check with attached sample and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

Attachment: Menuroting_e5bd529d.zip