generate menu url as routerlink instead of href

[Robby Encinas]

is it possible for <ejs-menu [items]='menuItems'></ejs-menu> to generate url as routerlinks instead of rel='nofollow' href. Thanks!

[Vinoth Kumar Sundara Moorthy]

Hi Robby, 

Thank you for contacting Syncfusion support. 

We have checked your reported query and we suspect that you want to use angular routing while selecting menu items. We have prepared a stackblitz sample that demonstrate this requirement and the same can be found in the below link. 

https://stackblitz.com/edit/angular-e7ee1p-dxvade 

Could you please check the above sample and get back to us whether we misunderstood your requirement or need further assistance on this?  

Regards, 

Vinoth Kumar S 

[Casper]

Just had a look at this and it is a crazy amount of overhead to just do a routerLink which should be the native option when using Angular. Would it not make sense to update the component to rather use routerLink as the default? The solution provided is also very limited and will not give the flexibility needed. Surely this can't be the first time this has been brought up??

[Vinoth Kumar Sundara Moorthy]

Hi Robby, 

 

Thank you for the update. 

 

We have checked your reported suggestion in our end and we can able to provide the router link for menu items using template property with CSS customization in it. Please find the below code example. 

 

Code Example 

@Component({ 

selector: 'my-app', 

template: ` 

<ejs-menu #menu id='menu' [items]='menuItems' (open)="open($event)"> 

    <ng-template #template let-menuItems=""> 

        <a style="display:block" class="e-custom" [routerLink]="menuItems.path"> 

            {{ menuItems.text }} 

        </a> 

    </ng-template> 

</ejs-menu> 

<router-outlet></router-outlet>` 

}) 

 

<style> 

    .e-custom { 

        color: #333 !important; 

    } 

    a:hover{ 

        text-decoration: none; 

    } 

</style> 

 

For your convenience, we have prepared the sample based on our suggestion. Please find the link below, 

https://stackblitz.com/edit/angular-e7ee1p-bt1xmj?file=app%2Fapp.component.ts 

 

Could you please check the above details and get back to us, if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S 

[Robby Encinas]

Dear Team, I've solved this problem already. Thanks!

[Vinoth Kumar Sundara Moorthy]

Hi Robby, 

  

We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on Syncfusion components. 

  

Regards, 

Vinoth Kumar S 

[Alan B Dee]

I just want to add the Robby is correct; that is way harder then it should be. MenuItemModel should just have an interface property: routerLink that functions the same way as it does in basic angular. I'd be interested to see how Robby solved this but I for one will be looking for a solution outside this component. 

[Vinoth Kumar Sundara Moorthy]

Hi Robby, 

 

Good day to you. 

 

We have considered your suggestion and created an improvement task for this. We have planned to include this fix in our Essential Studio 2019 Volume 3 SP1 release, which is scheduled to roll out in September 2019. We appreciate your patience until then. 

 

You can track the status of this improvement using below link from our feedback portal, 

https://www.syncfusion.com/feedback/8310/need-to-provide-routerlink-support-for-angular-menu-component 

 

Regards, 

Vinoth Kumar S 

[James]

Robby, how did you solve it?

[James]

In the proposed workaround below, the 'menuItems.path' should be 'menuItems.url' because the syncfusion structure MenuItemModel does not have the property 'path'. Perhaps the .path property is being added in release that fixes this problem, 2019 Vol3 SP1 due mid Oct 2019

<ejs-menu #menu id='menu' [items]='menuItems' (open)="open($event)"> 

    <ng-template #template let-menuItems=""> 

        <a style="display:block" class="e-custom" [routerLink]="menuItems.path"> 

            {{ menuItems.text }} 

        </a> 

    </ng-template> 

</ejs-menu> 

[James]

MORE BUGS

The workaround does not work with icons in the meues.

When using sidebar with menu, there are no icons rendered.

What is the workaround so that I can have sidebar menu with icons with angular routing?

[Robby Encinas]

Hi James, this is my workaround before and the icons are rendered properly. Thanks!

 <ejs-menu [items]='menuItems'>
                <ng-template #template let-menuItems="">
                  <div *ngIf="menuItems.text" style="width:100%;display:flex;justify-content:space-between;">
                    <span class="{{menuItems.iconCss}}"></span>
                    <span class="navRes" style="width:100%;">
                      <a class="e-menu-text e-menu-url" *ngIf="menuItems.url" routerLink={{menuItems.url}} >{{menuItems.text}}</a>
                    </span>
                 </div>
                </ng-template>
              </ejs-menu>

[James]

The workaround provided by Synfusion in post above (July19) works in the most basic of uses, but does not work for typical cases. 

It does not

• Allow query or parameters in the routes
• Allow icons in the menus (although Robby October 17) has provided a workaround
• Does not work for many controls including SideBar menu (https://ej2.syncfusion.com/angular/demos/#/material/sidebar/sidebar-menu) or controls where the meue control is embedded.

The Perfect Workaround

The workaround fixes everything, by overriding the MenuItemModel[] class to a child class and poloymorphism on that. The MenuItemModel is a class provided by Syncfusion defining the id, Text, iconCss and url of the route.

1. In a new file create a new child interface extending (inherting) from MenuItemMode as below

export interface IMenuItemModelChild extends MenuItemModel {

    path?:string;     //This is for your path

    query?:string;     //This is for your optional query param, add more query properties if you need them

    items?: IMenuItemModelChild[]; //We over write the exiting items property of the parent

}

2. In your components ts file (the component where you use the menu), create your menu structure using IMenuItemModelChild instead of MenuItemModel

    public menuItems: IMenuItemModelChild[] = [

        {

            text: 'Project',

            path: "all",

            iconCss: 'icon-globe icon',

            items: [

                { text: 'Open', path: 'projects', query: "44"},

                { text: 'New', path: 'projects' },

            ]

        },

        {

            text: 'Suppliers',

            iconCss: 'icon-bell-alt icon',

            items: [

                { text: 'New' },

                { text: 'Edit' },

            ]

        },

3.In you httml file subscribe to the  'select' event (note you bind to 'menuItems' as normal, which is now a child class (ignore the orientation and cssClass properties they are not part of this workaround)

 [items]='menuItems' orientation='Vertical' cssClass='dock-menu' (select) = "onSelect($event)"  >

4. In your component.ts file define the event handler, cast the 'items' property of the event handler to

MenuItemModelChild, this gives you access to the path and query variables which you then use in the router.

    public onSelect(event:MenuEventArgs)

    {

        const x:MenuItemModelChild = event.item;

        this.router.navigate([x.path, { filter: x.query, foo: 'foo' }], { relativeTo: this.route });

    }

5. You'll need to inject Router and ActivatedRoute in to the constructor as shown below for completeness.

constructor(

        private router: Router,

        private route:ActivatedRoute

        ) { }

6. And just so there is no misunderstanding, you don't use the workaround as proposed by Syncfusion. The only edits to the HTML

are as per my notes above. AND the existing url field must always be set to empty string, else an absolute route will occur

[Madhan Venkateshan]

Hi James, 

 

Thanks for your update. 

 

We do not have support to allow query or parameters in the routes. The solution provided by robby on October 17 to allow icons in menu seems to be the suitable solution when rendered in template. 

 

Regards, 

Madhan V 

[Shannon Pence]

How do you account for the > icon indicating further links?  Using the example provided on July 19, 2019.

[Sangeetha Priya Murugan]

Hi Shannon, 

 

Thank you for your update. 

 

We have checked your reported requirement “To provide the router link for sub menu items”. For your convenience, we have prepared the sample based on your requirement. Please find the link below. 

 

Sample Link: https://stackblitz.com/edit/angular-e7ee1p-brhnzq?file=app%2Fapp.component.ts 

 

Could you please check the above sample and get back to us, if you need any further assistance on this. 

 

Regards, 

Sangeetha M 

 

[joao.portella]

Thank you very much James!

Your solution works perfectly!!

Hello SyncFusion Team! A definitive solution that has the same result as James solution is essential.

[Florence Lilian Awino]

Hi joao.portella,

We're glad your issue was resolved. Please get back to us for further assistance in the future.

Regards,

Florence L.