SideBarMenuItem Click( Redirect and append Child) #4175

0

ismcagdas created 7 years ago

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.

0

velu created 7 years ago

Hi,

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

0

ismcagdas created 7 years ago

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.

0

velu created 7 years ago

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

0

ismcagdas created 7 years ago

Support Team

Hi,

Please add

href="javascript:;"

to first <a> element in the html code.

0

velu created 7 years ago

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

0

ismcagdas created 7 years ago

Support Team

Hi @velu,

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

0

velu created 7 years ago

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

0

ismcagdas created 7 years ago

Support Team

Hi @velu,

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

9 Answer(s)