CODEWITHSUNDEEP
angulartypescript
danda
danda

Reputation: 583

angular 9, @ContentChildren does not initialize correctly

I have a directive named "VerticalTabsDirective" with propery-

@ContentChildren(MatTabLink) contentChildren: QueryList<MatTabLink>;
@Input() exlVerticalTabs

I am using it in a my component with recursive ng-template in this way-

 <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>

But when I debug my directive I can see that "contentChildren" property does not initialize correctly, the "_results" object inside is empty, and does not contain "MatTabLink" fields as expected. In other components I use "VerticalTabsDirective" and "contentChildren" is initialized correctly, but I do not use recursive ng-template is those components.

Any idea how to make it work?

Upvotes: 2

Views: 1704

Answers (1)

danda
danda

Reputation: 583

I found an answer that can help people- need to add "{descendants: true}".

 @ContentChildren(ChildComponent, { descendants: true}) children: QueryList<
    ChildComponent>

Upvotes: 3

Related Questions