Base solution for your next web application
Open Closed

SideBarMenuItem Click( Redirect and append Child) #4175

User avatar
0
velu created

HI,

There is any way to redirect and append child menu at a time in SideBarMenuItem?

  • File --->File Page |__Edit ---> Edit Page |__Delete --> Delete Page

Suppose I click on the main menu(file) then I want to redirect to the page(File Page) and append child menu.

Now, In current environment only append child menu not redirect to the file menu...

Thanks.

Go to accepted answer
9 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @velu,

    I think you want to show "Edit" and "Delete" menu items under "File" menu item, when user navigates to File page. If so, this is not possible with default implementation but you can change code to displya sub menu items if the current route is it's parent.

  • User Avatar
    0
    velu created

    Hi,

    Please check the file for more details. [https://drive.google.com/open?id=1JTt_458aTqZMYoA9gSkT7jQsbWbp-AT_]) Thanks

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @velu now I understand. So, in your side-bar-menu.component.html file, you can change below lines:

    <li *ngIf="showMenuItem(menuItem)" routerLinkActive="m-menu__item--active" class="m-menu__item m-menu__item--submenu" [ngClass]="{'m-menu__item--expanded m-menu__item--open': menuItem.items.length >  0}" aria-haspopup="true" data-menu-submenu-toggle="hover">

    <a [routerLink]="[menuItem.route]" *ngIf="!menuItem.items.length" class="m-menu__link m-menu__toggle">
        <i class="m-menu__link-icon {{menuItem.icon}}"></i>
        <span class="m-menu__link-text">
            <span class="title">{{l(menuItem.name)}}</span>
        </span>
    </a>

    <a href="javascript:;" *ngIf="menuItem.items.length" class="m-menu__link m-menu__toggle">
        <i class="m-menu__link-icon {{menuItem.icon}}"></i>
        <span class="m-menu__link-text">
            <span class="title">{{l(menuItem.name)}}</span>
        </span>
        <i class="m-menu__ver-arrow la la-angle-right"></i>
    </a>

    to this one:

    <li *ngIf="showMenuItem(menuItem)" routerLinkActive="m-menu__item--active" class="m-menu__item m-menu__item--submenu" [ngClass]="{'m-menu__item--expanded m-menu__item--open': menuItem.items.length >  0}" aria-haspopup="true" data-menu-submenu-toggle="hover">

    <a [routerLink]="[menuItem.route]" class="m-menu__link m-menu__toggle">
        <i class="m-menu__link-icon {{menuItem.icon}}"></i>
        <span class="m-menu__link-text">
            <span class="title">{{l(menuItem.name)}}</span>
        </span>
        <i *ngIf="menuItem.items.length" class="m-menu__ver-arrow la la-angle-right"></i>
    </a>

    Please test it very well :)

    Thanks.

  • User Avatar
    0
    velu created

    Hi,

    This was worked for me, But we found Some issues, Mabe implementation was wrong,

    Found Some Bug [] When we click some item like administrator, Menuitem is redirecting to the dashboard. [] "<" Arrow sine was not displayed.

    Please Check Following code.

    &lt;div class=&quot;page-sidebar navbar-collapse collapse&quot;&gt;
    
    
    
    
    
    
    <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
        
        <ng-template ngFor let-menuItem [ngForOf]="menu.items" let-mainMenuItemIndex="index">
            <li *ngIf="showMenuItem(menuItem)" routerLinkActive="m-menu__item--active" class="m-menu__item m-menu__item--submenu" [ngClass]="{'m-menu__item--expanded m-menu__item--open': menuItem.items.length >  0}" aria-haspopup="true" data-menu-submenu-toggle="hover">
                <a [routerLink]="[menuItem.route]" class="m-menu__link m-menu__toggle">
                    <i class="m-menu__link-icon {{menuItem.icon}}"></i>
                    <span class="m-menu__link-text">
                        <span class="title">{{l(menuItem.name)}}</span>
                    </span>
                    <i *ngIf="menuItem.items.length" class="m-menu__ver-arrow la la-angle-right"></i>
                </a>

                <ul class="sub-menu" *ngIf="menuItem.items.length">
                    
                    <ng-template ngFor let-childMenuItem [ngForOf]="menuItem.items" let-mainMenuItemIndex="index">
                        <li *ngIf="showMenuItem(childMenuItem)" routerLinkActive="active" [ngClass]="{'start': childMenuItemIndex == 0}">
                            <a [routerLink]="[childMenuItem.route]" *ngIf="!childMenuItem.items.length">
                                <i class="{{childMenuItem.icon}}"></i>
                                <span class="title">{{l(childMenuItem.name)}}</span>
                            </a>
                            <a href="javascript:;" class="auto" *ngIf="childMenuItem.items.length">
                                <i class="{{childMenuItem.icon}}"></i>
                                <span class="title">{{l(childMenuItem.name)}}</span>
                                <span class="arrow "></span>
                            </a>
                            <ul class="sub-menu" *ngIf="childMenuItem.items.length">
                                
                                <ng-template ngFor let-childOfChildMenuItem [ngForOf]="childMenuItem.items" let-childOfChildMenuItemIndex="index">
                                    <li *ngIf="showMenuItem(childOfChildMenuItem)" routerLinkActive="active" [ngClass]="{'start': childOfChildMenuItemIndex == 0}">
                                        <a [routerLink]="[childOfChildMenuItem.route]" *ngIf="!childOfChildMenuItem.items.length">
                                            <i class="{{childOfChildMenuItem.icon}}"></i>
                                            <span class="title">{{l(childOfChildMenuItem.name)}}</span>
                                        </a>
                                        <a href="javascript:;" class="auto" *ngIf="childOfChildMenuItem.items.length">
                                            <i class="{{childOfChildMenuItem.icon}}"></i>
                                            <span class="title">{{l(childOfChildMenuItem.name)}}</span>
                                            <span class="arrow "></span>
                                        </a>
                                        <ul class="sub-menu" *ngIf="childOfChildMenuItem.items.length">
                                            
                                            <ng-template ngFor let-childOfChildOfChildMenuItem [ngForOf]="childOfChildMenuItem.items" let-childOfChildMenuItemIndex="index">
                                                <li *ngIf="showMenuItem(childOfChildOfChildMenuItem)" routerLinkActive="active" [ngClass]="{'start': childOfChildMenuItemIndex == 0}">
                                                    <a [routerLink]="[childOfChildOfChildMenuItem.route]">
                                                        <i class="{{childOfChildOfChildMenuItem.icon}}"></i>
                                                        <span class="title">{{l(childOfChildOfChildMenuItem.name)}}</span>
                                                    </a>
                                                </li>
                                            </ng-template>
                                        </ul>
                                    </li>
                                </ng-template>
                            </ul>
                        </li>
                    </ng-template>
                </ul>
            </li>
        </ng-template>
    </ul>

</div>

    Thanks....

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Please add

    href="javascript:;"

    to first <a> element in the html code.

  • User Avatar
    0
    velu created

    Hi, The first Issue has been resolved,

    The following issue still, persist. [*] When we click some item like administrator, Menuitem is redirecting to the dashboard.

    Thsnks

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @velu,

    Can you share content of your side-bar-menu.component.html ?

  • User Avatar
    0
    velu created

    Hi,

    Please check this

    <div class="page-sidebar navbar-collapse collapse">
    
    
    
    
    
    
    <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
        
        <ng-template ngFor let-menuItem [ngForOf]="menu.items" let-mainMenuItemIndex="index">
            <li *ngIf="showMenuItem(menuItem)" routerLinkActive="m-menu__item--active" class="m-menu__item m-menu__item--submenu" [ngClass]="{'m-menu__item--expanded m-menu__item--open': menuItem.items.length >  0}" aria-haspopup="true" data-menu-submenu-toggle="hover">
                <a href="javascript:;" [routerLink]="[menuItem.route]" class="m-menu__link m-menu__toggle">
                    <i class="m-menu__link-icon {{menuItem.icon}}"></i>
                    <span class="m-menu__link-text">
                        <span class="title">{{l(menuItem.name)}}</span>
                    </span>
                    <i *ngIf="menuItem.items.length" class="m-menu__ver-arrow la la-angle-right"></i>
                </a>

                <ul class="sub-menu" *ngIf="menuItem.items.length">
                    
                    <ng-template ngFor let-childMenuItem [ngForOf]="menuItem.items" let-mainMenuItemIndex="index">
                        <li *ngIf="showMenuItem(childMenuItem)" routerLinkActive="active" [ngClass]="{'start': childMenuItemIndex == 0}">
                            <a [routerLink]="[childMenuItem.route]" *ngIf="!childMenuItem.items.length">
                                <i class="{{childMenuItem.icon}}"></i>
                                <span class="title">{{l(childMenuItem.name)}}</span>
                            </a>
                            <a href="javascript:;" class="auto" *ngIf="childMenuItem.items.length">
                                <i class="{{childMenuItem.icon}}"></i>
                                <span class="title">{{l(childMenuItem.name)}}</span>
                                <span class="arrow "></span>
                            </a>
                            <ul class="sub-menu" *ngIf="childMenuItem.items.length">
                                
                                <ng-template ngFor let-childOfChildMenuItem [ngForOf]="childMenuItem.items" let-childOfChildMenuItemIndex="index">
                                    <li *ngIf="showMenuItem(childOfChildMenuItem)" routerLinkActive="active" [ngClass]="{'start': childOfChildMenuItemIndex == 0}">
                                        <a [routerLink]="[childOfChildMenuItem.route]" *ngIf="!childOfChildMenuItem.items.length">
                                            <i class="{{childOfChildMenuItem.icon}}"></i>
                                            <span class="title">{{l(childOfChildMenuItem.name)}}</span>
                                        </a>
                                        <a href="javascript:;" class="auto" *ngIf="childOfChildMenuItem.items.length">
                                            <i class="{{childOfChildMenuItem.icon}}"></i>
                                            <span class="title">{{l(childOfChildMenuItem.name)}}</span>
                                            <span class="arrow "></span>
                                        </a>
                                        <ul class="sub-menu" *ngIf="childOfChildMenuItem.items.length">
                                            
                                            <ng-template ngFor let-childOfChildOfChildMenuItem [ngForOf]="childOfChildMenuItem.items" let-childOfChildMenuItemIndex="index">
                                                <li *ngIf="showMenuItem(childOfChildOfChildMenuItem)" routerLinkActive="active" [ngClass]="{'start': childOfChildMenuItemIndex == 0}">
                                                    <a [routerLink]="[childOfChildOfChildMenuItem.route]">
                                                        <i class="{{childOfChildOfChildMenuItem.icon}}"></i>
                                                        <span class="title">{{l(childOfChildOfChildMenuItem.name)}}</span>
                                                    </a>
                                                </li>
                                            </ng-template>
                                        </ul>
                                    </li>
                                </ng-template>
                            </ul>
                        </li>
                    </ng-template>
                </ul>
            </li>
        </ng-template>
    </ul>

</div>

    Thanks

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @velu,

    Your code seems correct. Please send your project to us so we can check it.

Assignee
No one
Labels
Non yet