jQuery UI Widgets Forums Angular jqxMenu issue with Angular routerlink and image

This topic contains 3 replies, has 3 voices, and was last updated by  Hristo 1 week, 3 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • ryan.groves

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

    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">
    		<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>


    Hello ryan.groves,

    Please, take a look at this example.

    Best Regards,
    Hristo Hristov

    jQWidgets team


    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';
        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 reply was modified 1 week, 4 days ago by  myema.hmn.


    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.