title: Angular: Material ui cdk-virtual-scroll-viewport not working as expected
body: <p>Followed the official documentation <a href="https://material.angular.io/cdk/scrolling/api" rel="nofollow noreferrer">here</a> to implement a virtual viewport but getting the following error message in the html component:</p>
  <p><strong>Error message</strong></p>
  <pre><code>'cdk-virtual-scroll-viewport' is not a known element:
  1. If 'cdk-virtual-scroll-viewport' is an Angular component, then verify that it is part of this module.
  2. If 'cdk-virtual-scroll-viewport' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)
  </code></pre>
  <p>The code:</p>
  <p><strong>module</strong></p>
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { ScrollingModule } from '@angular/cdk/scrolling';
  import { ScrollDispatcher } from '@angular/cdk/scrolling';
  import { CdkScrollableModule } from '@angular/cdk/scrolling';
  import { SearchComponent } from './search.component';
  
  @NgModule({
    declarations: [
      SearchComponent
    ],
    imports: [
      CommonModule,
      ScrollingModule,
      CdkScrollableModule,
      ScrollDispatcher
    ],
    bootstrap: [SearchComponent]
  })
  export class SearchModule { }
  </code></pre>
  <p><strong>html</strong></p>
  <pre><code>&lt;cdk-virtual-scroll-viewport itemSize=&quot;1000&quot; class=&quot;list-container lg&quot;&gt;
    &lt;div *cdkVirtualFor=&quot;let number of numbers&quot; class=&quot;number&quot;&gt;{{number}}&lt;/div&gt;
  &lt;/cdk-virtual-scroll-viewport&gt;
  </code></pre>
  <p><strong>component</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-search',
    templateUrl: './search.component.html',
    styleUrls: ['./search.component.scss']
  })
  export class SearchComponent implements OnInit {
  
    numbers : number[] = [];
  
    constructor() {
       for (let i = 0; i&lt;1000; i++) {
        this.numbers.push(i);
       }
     }
  
    ngOnInit(): void {
    }
  }
  </code></pre>
  <p><strong>configuration</strong></p>
  <pre><code>Angular CLI: 13.2.4
  Node: 16.13.1
  Package Manager: npm 8.3.1
  OS: win32 x64
  
  Angular: 13.2.3
  ... animations, common, compiler, compiler-cli, core, forms
  ... material, platform-browser, platform-browser-dynamic, router
  
  Package                         Version
  ---------------------------------------------------------
  @angular-devkit/architect       0.1302.4
  @angular-devkit/build-angular   13.2.4
  @angular-devkit/core            13.2.4
  @angular-devkit/schematics      13.2.4
  @angular/cdk                    13.2.4
  @angular/cli                    13.2.4
  @angular/flex-layout            13.0.0-beta.38
  @schematics/angular             13.2.4
  rxjs                            7.5.4
  typescript                      4.5.5
  </code></pre>
  <p>Can someone point me to the right direction ?</p>