How to extend the CdkVirtualScrollViewport angular material component?


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

  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: [
      useClass: CustomVirtualScrollStrategy
export class VirtualScrollViewportExtendedComponent extends CdkVirtualScrollViewport implements OnInit {

    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._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?

Source: Angular Material Quesions


Leave a Reply

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

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us