Apply CdkVirtualScroll on the content of ngContent

Question

I have the following case in my angular app.

CASE :

I have a custom input select that basically do some styling and logic, and draw a list of input :

(SIMPLIFIED) :

<app-select>
    <app-option
    *ngFor="let country of locations$ | async"
    [name]="'i18n.Enum.Country' | translate: { country: country.code }"
    [value]="country.code"
    ></app-option>
</app-select>

and in the app-select template I just do

<div>
 <ng-content></ng-content>
</div>

simple ex : https://stackblitz.com/edit/angular-pwdm7r?file=src/app/app.component.ts

PROBLEM :

Now, I would like to make this *ngFor something that can be virtually scrollable WITH the LEAST amount of code.

One way would be to do this every time I want to use a virtual scroll.

<app-select>
  <cdk-virtual-scroll-viewport>
    <app-option
    *cdkVirtualFor="let country of locations$ | async"
    [name]="'i18n.Enum.Country' | translate: { country: country.code }"
    [value]="country.code"
    ></app-option>
  </cdk-virtual-scroll-viewport>
</app-select>

but the solution I am trying to make is to write a single cdk-virtual-scroll-viewport inside my selector component

<div>
  <cdk-virtual-scroll-viewport>
     <ng-content></ng-content>
  </cdk-virtual-scroll-viewport>
</div>

like this => https://stackblitz.com/edit/angular-fuw1fu?file=src/app/app.component.html

NullInjectorError: No provider for CdkVirtualScrollViewport!

So I tried to read the content of ng-content and attach only if cdkVirtualFor is present.

https://stackblitz.com/edit/angular-ax3yvu?file=src/app/select/select.component.ts

but I keep receiving the same error.

Is there a way to achieve this ?

Apply CdkVirtualScroll on the content of ngContent

0 Answers0