Sapphire submenu not working

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
Beimar_R
Posts: 1
Joined: 11 Jun 2021, 00:40

11 Jun 2021, 00:53

Hi, I am trying to create a menu with subitems with the Sapphire template, however they do not appear in the menu.
My label variable:

Code: Select all

this.model = [
            {id: "1", label: 'Validar créditos', icon: 'pi pi-check-square', routerLink: ["/"+URL.reviews], visible: this.canAccessValidacion},
            {id: "2", label: 'Procesar créditos', icon: 'pi pi-cog', routerLink: ["/"+URL.cargar], visible: this.canAccessCarga},
            {id: "3", label: 'Configurar plantillas', icon: 'pi pi-file', routerLink: ["/"+URL.plantilla], visible: this.canAccessPlantillas},
            {id: "4", label: 'Reportes', icon: 'pi pi-book', visible: this.canAccessPlantillas, items: [
                {id:"5", label: 'Reporte de dictamen', icon: 'pi pi-copy', routerLink: ["/"+URL.reporteDictamen], visible: this.canAccessPlantillas}
            ]}
        ];  
My app.menu:

Code: Select all

<div class="layout-menu-container" (click)="appMain.onSidebarClick($event)">
    <div class="layout-menu-wrapper">
        <ul class="layout-menu">
            <li app-menuitem *ngFor="let item of model; let i = index;" 
                [item]="item" [index]="i" [root]="true" [mega]="true"></li>
        </ul>
   </div>
</div>
And my app.menuitem

Code: Select all

<ng-container>
			<a (click)="itemClick($event)" (mouseenter)="onMouseEnter()" *ngIf="item.visible"
			   [routerLink]="item.routerLink" routerLinkActive="active-menuitem-routerlink" pRipple 
			   [routerLinkActiveOptions]="{exact: true}" [attr.target]="item.target" [attr.tabindex]="0">
              			 <i *ngIf="item.icon && item.visible" [ngClass]="item.icon" class="layout-menuitem-icon"></i>
				<span class="menuitem-text" *ngIf="item.visible">{{item.label}}</span>
				<i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
				<span class="menuitem-badge" *ngIf="item.badge && item.visible">{{item.label}}</span>
			</a>
</ng-container>
I don't know if I'm doing something wrong, but only main items are loaded, submenu items are not loaded.
I appreciate your help.

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

14 Jun 2021, 09:45

Hi,
You need to add the below div part in to the <ng-container> tag because this part create submenu;

Code: Select all

<div class="layout-submenu-container" ...>
//other codes
</div>

Post Reply

Return to “Sapphire - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest