cdk Virtual Scrolling with HTML table

Question

I am very new to angular and have been stuck on this problem for more than a day now. Using Angular 7 and angular/cdk ver 7.3.4. What I am trying to accomplish seems very simple. I have a good old HTML table with large number of rows. I want to display it on the screen with virtual scrolling enabled (using cdk-virtual-scroll-viewport). I followed this tutorial to accomplish this:

https://www.thecodecampus.de/blog/virtual-scrolling-in-angular-7/

I see it working in stackblitz on their page but when I try it in my environment, there is nothing. No errors in the chrome debugger, but nothing on the screen either. The h1 element on the top shows up but not the table itself. It is completely ignored. What am I missing here.Is this the right approach to do it?

Thanks for the help:

here is my component mark up:

<h1>CRD component</h1>

<cdk-virtual-scroll-viewport [itemSize]="20">
    <table>
      <thead>
        <tr>
          <td>Name</td>
          <td>ID</td>
        </tr>   
      </thead>
      <tbody>
        <tr *cdkVirtualFor="let row of tableData">
          <td>{{row.name}}</td>
          <td>{{row.id}}</td>
        </tr>
      </tbody>
    </table>
  </cdk-virtual-scroll-viewport>

And here is component code:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-crd',
  templateUrl: './crd.component.html',
  styleUrls: ['./crd.component.css']
})
export class CrdComponent implements OnInit {
  name = 'Angular';

  tableData = [];

  constructor() { }

  ngOnInit() {
    for (let i = 0; i < 1000; i++) {
      this.tableData.push({
        name: 'Name ${i}',
        id: i
      });
    }
  }

}

finally, I have the app module updated like so:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ScrollingModule } from '@angular/cdk/scrolling';


    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { UnitListComponent } from './Unit/unit-list.component';
    import { CrdComponent } from './crd/crd.component';

    @NgModule({
      declarations: [
        AppComponent,
        UnitListComponent,
        CrdComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        AppRoutingModule,
        HttpClientModule,
        BrowserAnimationsModule,
        ScrollingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Whispering

Answer 1

I was neglecting to set the cdk-virtual-scroll-viewport element height in the css file. That's why it was not working:

table {
  width: 100%;
}

cdk-virtual-scroll-viewport {
  height: 400px;
}

works now with the height set correctly.

Whispering

You're not alone... Thanks for sharing! – Leukoderma