Get @ContentChildren from child components

I’m trying to access child element refs through the @ContentChildren decorator in order to enable keyboard navigation.

@ContentChildren('listItem', {descendants: true}) childItems: Element;

The listItems themselves are projected onto the component where we have this decorator.

  • It works when we have the content is directly injected into the ng-content

    <div class="option-picker" popup-content>
    <button
        #listItem
        type="button"
        class="option-picker__item"
        *ngFor="let option of ['අ', 'අා']"
        (click)="selectOption(option)">
        {{option}}
    </button>
    

  • It stops working if we move the button here into a custom component

<app-option-picker [optionList]="[1, 2, 3]" popup-content> </app-option-picker>

Please find the StackBlitz example.

I saw a few similar issues and a github issue that was opened a while back.

They suggest that we use the undocumented ngProjectAs feature. I tried using this without much success in the StackBlitz example.

Source: Angular

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.