I'm trying to dynamically build a menu using the ng-zorro library. The problem is that I want to render nested submenus using recursive ng-template, and I'm getting the error when trying to use the nz-submenu directive inside ng-template.
The error is NullInjectorError: No provider for MenuService!
Here is the demo: https://stackblitz.com/edit/angular-ojfbuo-ktddi3?file=src/app/app.component.ts.
Has anybody encountered such a problem and was able to fix it?
You have to move ngTemplate inside the first ngContainer that menu exist fixed stackblitz
@Component({
selector: 'nz-demo-menu-horizontal',
template: `
<ul nz-menu nzMode="inline">
<ng-container *ngFor="let menu of menus">
<ng-container *ngTemplateOutlet="recursiveListTmpl; context: { menu: menu }"></ng-container>
<ng-template #recursiveListTmpl let-menu="menu">
<li
*ngIf="menu.children && menu.children.length > 0"
nz-submenu
>
{{menu.title}}
<ng-container *ngTemplateOutlet="recursiveListTmpl; context: { menu: menu.children }"></ng-container>
</li>
</ng-template>
<li *ngIf="!menu.children || menu.children.length==0" nz-menu-item>
{{menu.title}}
</li>
</ng-container>
</ul>
`,
})
export class NzDemoMenuHorizontalComponent {
menus = [
{ title: 'test', children: [] },
{
title: 'with children',
children: [
{ title: 'child', children: [{ title: 'child 2', children: [] }] },
],
},
];
}