<ng-container>
  <div *ngIf="root && item.visible !== false" class="layout-menuitem-root-text">{{ item.label }}</div>
  <ng-template #defaultIcon>
    <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
  </ng-template>
  <a
    *ngIf="(!item.routerLink || item.items) && item.visible !== false"
    [attr.href]="item.url"
    (click)="itemClick($event)"
    [ngClass]="item.styleClass"
    [attr.target]="item.target"
    tabindex="0"
    pRipple
  >
    <ng-container *ngIf="item['customIcon']; else defaultIcon">
      <ng-container *ngComponentOutlet="item['customIcon']" size="14"></ng-container>
    </ng-container>
    <span class="layout-menuitem-text">{{ item.label }}</span>
    <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
  </a>
  <a
    *ngIf="item.routerLink && !item.items && item.visible !== false"
    (click)="itemClick($event)"
    [ngClass]="item.styleClass"
    [routerLink]="item.routerLink"
    routerLinkActive="active-route"
    [routerLinkActiveOptions]="
      item.routerLinkActiveOptions || {
        paths: 'subset',
        queryParams: 'ignored',
        matrixParams: 'ignored',
        fragment: 'ignored',
      }
    "
    [fragment]="item.fragment"
    [queryParamsHandling]="item.queryParamsHandling"
    [preserveFragment]="item.preserveFragment"
    [skipLocationChange]="item.skipLocationChange"
    [replaceUrl]="item.replaceUrl"
    [state]="item.state"
    [queryParams]="item.queryParams"
    [attr.target]="item.target"
    tabindex="0"
    pRipple
  >
    <ng-container *ngIf="item['customIcon']; else defaultIcon">
      <ng-container *ngComponentOutlet="item['customIcon']" size="14"></ng-container>
    </ng-container>
    <span class="layout-menuitem-text">{{ item.label }}</span>
    <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
  </a>

  <ul *ngIf="item.items && item.visible !== false" [@children]="submenuAnimation">
    <ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
      <li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child['badgeClass']"></li>
    </ng-template>
  </ul>
</ng-container>
