CODEWITHSUNDEEP
angular-materialangular7
Samudrala Ramu
Samudrala Ramu

Reputation: 2106

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

<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

Upvotes: 12

Views: 30838

Answers (6)

Dmitry
Dmitry

Reputation: 161

You should import ScrollingModule:

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

And add it into inports array in NgModule:

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

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)

Upvotes: 12

Boris Park
Boris Park

Reputation: 105

I wonder if you solved the problem. In my case, the component trying to use <cdk-virtual-scroll-viewport> was missing in the declarations part of the app.module.ts file.

A problem arose in an area that was not expected at all, and it was difficult to solve it.

I hope this solution to help you.

Upvotes: 0

Ankit Jain
Ankit Jain

Reputation: 91

Add below

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

Remove below

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

Upvotes: 9

batman
batman

Reputation: 41

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>

Upvotes: 4

Kalana Suraweera
Kalana Suraweera

Reputation: 51

enter image description here

(Referred from https://pusher.com/tutorials/infinite-scrolling-angular-cdk) use *cdkVirtualFor instead of ngFor

Upvotes: 0

Krishalsinh Raj
Krishalsinh Raj

Reputation: 31

try this, it works for me.

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

Upvotes: -3

Related Questions