jqxMenu issue with Angular routerlink and image

[ryan.grovesParticipant]

Environment
• Angular v2.3
• Angular Router v3.3
• jQWidgets v4.5.3
• Device type: PC
• Browser: Chrome 65, IE11

Issue
My app is using angular routing to create a spa. I am binding the [routerLink] property on the anchor element with the proper route to provide navigation in the html. In the jQWidgets menu component (jqxMenuComponent), this works correctly when text is used with the anchor element. The correct behavior is to execute the route and display the routed UI component in the router outlet without re-bootstrapping the app (i.e. re-launching the app, reloading the router configuration, etc.). This does not work correctly when using an image element within the anchor element in the jQWidgets menu component (jqxMenu). In the jqxMenu, the user’s click is re-bootstrapping the app, which causes performance issues due to the overhead. Please refer to the sample html code below, where the 2 anchor elements with image elements experience the issue and the 2 anchor elements with just text do not experience the issue. You can see the route information processed by setting enableTracing: true in the RouterModule. I look forward to your response to resolve this issue. Thank you in advance!

<jqxMenu #jqxMenuTest [height]="30">
	<ul>
		<li><a [routerLink]="['/home']"><img src='Images/home.png' style='width:25px; height:25px' /></a></li>
		<li><a [routerLink]="['/home/admin']"><img src='Images/admin.png' style='width:25px; height:25px' /></a></li>
		<li><a [routerLink]="['/home']">Home Text</a></li>
		<li><a [routerLink]="['/home/admin']">Admin Text</a></li>
	</ul>
</jqxMenu>

[HristoParticipant]

Hello ryan.groves,

Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[myema.hmnParticipant]

jqxMenu.minimize() does not seem to work together with Angular routerLink.
I used your example above, only adding some code to app.components.ts to start the menu minimized. It works, if I comment out the this.jqxMenuTest.minimize(); statement. But it stops working if I minimize. Did I miss something?

import { Component, ViewChild,  AfterViewInit, ViewEncapsulation } from '@angular/core';
import { jqxMenuComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxmenu';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements AfterViewInit {
    @ViewChild('jqxMenuTest') jqxMenuTest: jqxMenuComponent; 

    ngAfterViewInit() {
        this.jqxMenuTest.minimize();
    }     
}

[HristoParticipant]

Hello myema.hmn,

About jqxMenu “routing” in Angular, I would like to suggest you use the Dynamic Injection approach.
Please, take a look at this tutorial.
Also, you could look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[NeilyParticipant]

Did you ever resolve this/find a GOOD work around? Seems silly that a MENU can not work with Angular routing!!

[HristoParticipant]

Hello Neily,

Could you clarify your case?
What you want to achieve?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts