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

This topic contains 5 replies, has 4 voices, and was last updated by  Hristo 3 months, 4 weeks ago.

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

  • ryan.groves
    Participant

    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>

    Hristo
    Participant

    Hello ryan.groves,

    Please, take a look at this example.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com


    myema.hmn
    Participant

    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();
        }     
    }
    • This reply was modified 9 months, 2 weeks ago by  myema.hmn.

    Hristo
    Participant

    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


    Neily
    Participant

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


    Hristo
    Participant

    Hello Neily,

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

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.