2

I need help understanding how to use <cdk-virtual-scroll-viewport in concert with angular stand alone components. I have many components, each with their own svg template that I would like to lazy load only when they are ready to render in the viewport. There is a list of strings to indicate which component to instantiate for each each element. Because there are so many possible components to instantiate, I would like each component to be stand alone instead of adding them to a declaration array of ngModule

Can you please help me with an example of how to accomplish this?

edit: what I have thought of so far

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items; let idx = index;" class="example-item">
    <ng-template #container></ng-template>
  </div>
</cdk-virtual-scroll-viewport>

import(`./lazy/${container.item}.component`).then(({ LazyComponent }) => {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(LazyComponent);
  this.cmpRefs[idx] = this.container.createComponent(componentFactory);
});
Benjamin McFerren
  • 822
  • 5
  • 21
  • 36

1 Answers1

-1

You can add *ngif directive to wrapped ng-template and set it to true, when this wrapper is visible in view port

Remigiusz
  • 19
  • 2