*cdkVirtualFor is not working in my application, it's in Angular 7.2.0

Question

<ul class="list">
  <cdk-virtual-scroll-viewport  style="height: 500px" itemSize="90" >
      <div *ngFor="let n of numbers" style="height:130px;">{{n}}</div>
  </cdk-virtual-scroll-viewport>
</ul>

<!--app.module.ts-->

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [ ScrollingModule ]
})

<!--app.component.ts-->

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  numbers: number[] = [];

  constructor() {
    for (let index = 0; index < 10000; index++) {
      this.numbers.push(index);
    }
  }
}

Everything is fine but its showing "=====>Can't bind to 'cdkVirtualForOf' since it isn't a known property of 'div'.<=====" ERROR

Answer 1

You should import an ScrollDispatchModule:

import { ScrollDispatchModule } from '@angular/cdk/scrolling';

And add it into inports array in NgModule:

@NgModule({
  ...
  imports: [
    ScrollDispatchModule
  ],
  ...
})

Now add some styles to your div:

.example-viewport {
    height: 200px;
    width: 200px;
    border: 1px solid black;
  }

.example-item {
    height: 50px;
}

It works for me) good luck)

Answer 2

Add below

import {ScrollingModule} from '@angular/cdk/scrolling';
imports: [
    ScrollingModule
  ]

Remove below

import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
imports: [
    CdkVirtualScrollViewport
  ]

Answer 3

You're using *ngFor while you should be using *cdkVirtualFor as mentioned in the official documentation.

Try this code below:

<ul class="list">
  <cdk-virtual-scroll-viewport  style="height: 500px" itemSize="90" >
      <div *cdkVirtualFor="let n of numbers" style="height:130px;">{{n}}</div>
  </cdk-virtual-scroll-viewport>
</ul>