How to extend the CdkVirtualScrollViewport angular material component?

Question

I currently have a use case where I would like to extend the CdkVirtualScrollViewport component so I could have access to its rendered template.

The specific case is that the base template renders a <div #contentWrapper class="cdk-virtual-scroll-content-wrapper"> which wraps the <ng-content> passed. I would like to have a way to pass an extra content outside of this header and, for that, I thought of extending the component to have my own template.

Unfortunately, it didn't work out of the box and after many attempts I just gave up. The latest state being:

import { Directionality } from '@angular/cdk/bidi'
import { CdkFixedSizeVirtualScroll, CdkScrollable, CdkVirtualScrollViewport, FixedSizeVirtualScrollStrategy, ScrollDispatcher, ViewportRuler, VirtualScrollStrategy, VIRTUAL_SCROLL_STRATEGY } from '@angular/cdk/scrolling'
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, NgZone, OnInit, Optional, ViewChild, ViewEncapsulation } from '@angular/core';

export class CustomVirtualScrollStrategy extends FixedSizeVirtualScrollStrategy {
  constructor() {
    super(50, 250, 500);
  }
}

@Component({
  selector: 'aw-virtual-scroll-viewport-extended',
  templateUrl: './virtual-scroll-viewport-extended.component.html',
  styleUrls: ['./virtual-scroll-viewport-extended.component.scss'],
  host: {
    'class': 'cdk-virtual-scroll-viewport',
    '[class.cdk-virtual-scroll-orientation-horizontal]': 'orientation === "horizontal"',
    '[class.cdk-virtual-scroll-orientation-vertical]': 'orientation !== "horizontal"',
  },
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    {
      provide: VIRTUAL_SCROLL_STRATEGY,
      useClass: CustomVirtualScrollStrategy
    }
  ]
})
export class VirtualScrollViewportExtendedComponent extends CdkVirtualScrollViewport implements OnInit {

  constructor(
    public override elementRef: ElementRef<HTMLElement>,
    _changeDetectorRef: ChangeDetectorRef,
    ngZone: NgZone,
    @Optional() @Inject(VIRTUAL_SCROLL_STRATEGY) _scrollStrategy: VirtualScrollStrategy,
    @Optional() dir: Directionality,
    scrollDispatcher: ScrollDispatcher,
    viewportRuler: ViewportRuler) {
    super(elementRef, _changeDetectorRef, ngZone, _scrollStrategy, dir, scrollDispatcher, viewportRuler)
  }

  ngOnInit(): void {
  }
}

And the error I'm having is:

TypeError: Cannot read properties of undefined (reading 'nativeElement')
    at CdkVirtualScrollViewport._doChangeDetection (scrolling.js:1006)

In this line: this._contentWrapper.nativeElement.style.transform = this._renderedContentTransform;

So the _contentWrapper is undefined, but I have no idea why if I'm extending the component's inner functionality.

Maybe someone can share a light over this topic?

How to extend the CdkVirtualScrollViewport angular material component?

0 Answers0