Tengo un menú que funciona a medias, lo baje de un template que no tiene documentación, pero la solución parece sencilla.
menu.component.html
<div class="app-sidebar__inner">
<ul class="vertical-nav-menu">
<li class="app-sidebar__heading">Menu</li>
<li *ngFor="let item of list" routerLinkActive="active">
<ng-container *ngIf="item.children && item.children.length > 0" >
<a href="">
</ng-container>
<ng-container *ngIf="!item.children">
<a [routerLink]="[ item.route ]">
</ng-container>
<i [class]="'metismenu-icon pe-7s-' + item.icon"></i>
<span class="fs8">{{ item.name }}</span>
<i *ngIf="item.children && item.children.length > 0"
class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul *ngIf="item.children && item.children.length > 0">
<li *ngFor="let child of item.children">
<a [routerLink]="[ item.route + child.route ]">
<span class="fs7">{{ child.name }}</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
Necesito identificar si la iteración del ng-for
tiene un índice que se llame children
entonces esa opción del menú se convierte en una opción desplegable que no debe llevar a ningún lado, únicamente hacer la animación de desplegar las rutas hijas. En caso que no haya el índice children
entonces es una ruta que debe controlar Angular con routerLink
por ende implementé este pequeño truco que no sirve
<ng-container *ngIf="item.children && item.children.length > 0" >
<a href="">
</ng-container>
<ng-container *ngIf="!item.children">
<a [routerLink]="[ item.route ]">
</ng-container>
Y el error que marca es
ERROR Error: Uncaught (in promise): Error: Template parse errors: Unexpected closing tag "ng-container". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags
¿Qué me recomendarían hacer?
menu.component.ts
import { Component, OnInit } from '@angular/core';
import HeaderList from '../interfaces/header-list.interface';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.sass','../app.component.sass']
})
export class MenuComponent implements OnInit {
public list: Array<HeaderList> = [
{
icon: 'home',
name: 'Página principal',
route: '/'
},
{
icon: 'cash',
name: 'Cálculo de comisiones',
route: '/calculo-comisiones'
},
{
icon: 'config',
name: 'Configuración layout',
route: '/subir-layout'
},
{
icon: 'cloud-upload',
name: 'Carga layout',
route: '/carga-layout'
},
{
icon: 'safe',
name: 'Aprovisionamiento',
route: '/aprovisionamiento'
},
{
icon: 'calculator',
name: 'Comisiones',
route: '/comisiones',
children: [
{
name: 'Autorización de comisiones',
route: '/autorizacion-comisiones'
},
{
name: 'Consulta de status comisiones',
route: '/consulta-comisiones'
},
]
}
];
constructor() {
}
ngOnInit() {
}
}
<a href="">
deberia<a href=""></a>