My directive, named "VerticalTabsDirective," has the following properties-
@ContentChildren(MatTabLink) contentChildren: QueryList<MatTabLink>;
@Input() exlVerticalTabs
In my component, I am utilizing this directive with a recursive ng-template in the following manner-
<nav mat-tab-nav-bar
[exlVerticalTabs]="selectedIndex">
<ng-template #recursiveNavList let-tabs="tabs" let-level="level">
<ng-container *ngFor="let tab of tabs; let i = index">
<a mat-tab-link
[active]="rla.isActive"
[routerLink]="[tab.link]"
#rla="routerLinkActive"
routerLinkActive>
<span>
{{tab}}
</span>
</a>
<div>
<ng-container *ngTemplateOutlet="recursiveNavList; context: { tabs: tab.subCategories, level: level + 1}"></ng-container>
</div>
</ng-container>
</ng-template>
<ng-container *ngTemplateOutlet="recursiveNavList; context: { tabs: profileOutputService.facets, level:0}"></ng-container>
</nav>
However, during debugging, I noticed that the "contentChildren" property is not initializing correctly. The "_results" object inside remains empty and does not contain the expected "MatTabLink" fields. Strangely, this issue only occurs when using recursion within ng-template.
Has anyone encountered and resolved this issue before?