CODEWITHSUNDEEP
angularangular-materialangular-cdk
mahdi aghasi
mahdi aghasi

Reputation: 378

cdkVirtualFor does not display anything

I have a dialog with the following code that shows several mat-card. The code works perfectly with ngfor and shows what I expect. But because the number of cards was large, I decided to use cdkScrolling , but when I added the code, it did not show anything, even though it was rendered in the code. And the page is displayed almost blank. Does anyone know what the problem is? Did I implement it incorrectly?

dialog.html:

    <div style="direction: rtl;position: relative" fxLayout="row wrap" fxLayoutAlign="space-around right">
  <ngx-spinner bdColor="rgba(0, 0, 0, 0.8)" size="medium" color="#fff" type="ball-clip-rotate"
               [fullScreen]="false"></ngx-spinner>
  <div fxFlex="100">
    <mat-card style="text-align: center; font-size: 13px">
      <mat-card-header style="flex-direction: row; box-sizing: border-box; display: flex;">
        <img mat-card-avatar #avatarPic [src]="data.selectedPage.profilePicUrl"
             (error)="avatarPic.src = 'assets/images/default_image-4_3-640x360.png'"
              >
        <mat-card-title>
          {{data.selectedPage.userName}}
        </mat-card-title>
        <mat-card-subtitle>
          {{data.selectedPage.bio}}
        </mat-card-subtitle>
        <span style="width: 100%"></span>
        <button mat-button (click)="close()">
          <mat-icon>keyboard_backspace</mat-icon>
        </button>
      </mat-card-header>
      <mat-divider style="border-top: 1px solid rgb(103, 102, 102)!important"></mat-divider>
      <div fxLayout="row wrap" fxLayoutAlign="center center" style="font-size: 16px;margin: 10px">
        <div fxFlex="50"> تعداد دنبال کننده: {{data.selectedPage.followerCount}} </div>
        <div fxFlex="50" style="border-right: 1px solid rgb(103, 102, 102);">  تعداد دنبال شونده: {{data.selectedPage.followingCount}} </div>
      </div>
      <mat-divider style="border-top: 1px solid rgb(103, 102, 102)!important"></mat-divider>
    </mat-card>
  </div>
  <cdk-virtual-scroll-viewport itemSize="500">
  <div *cdkVirtualFor="let media of medias" fxFlex="33.33">
    <mat-card>
      <mat-card-content style="height: 500px">
        <img #postImage (error)="postImage.src = 'assets/images/default_image-4_3-640x360.png'"
             [src]="media.imageUrl" style="width: 100%;height: 256px">
        <p style="height: 200px;overflow-x: hidden">{{media.caption}}</p>
      </mat-card-content>
      <button mat-button style="width: 100%;margin-bottom: 5px">دریافت کامنت ها</button>
      <mat-divider></mat-divider>
      <mat-card-actions style="padding: 10px;position: relative;display: flex">
        <div class="show-profile-likes">
          <mat-icon style="vertical-align: bottom;font-size: 15px">thumb_up_alt</mat-icon>
          {{media.likesCount}}
        </div>
        <div class="show-profile-comments">
        <mat-icon style="vertical-align: bottom;font-size: 15px">insert_comment</mat-icon>
        {{media.commentsCount}}
      </div>
        <div class="show-profile-date">
          <mat-icon style="vertical-align: bottom;font-size: 15px">insert_invitation</mat-icon>
          {{ media.takenAt | persianDate}}
        </div>
      </mat-card-actions>
    </mat-card>
  </div>
</cdk-virtual-scroll-viewport>
</div>

Upvotes: 4

Views: 4093

Answers (2)

Kavinda Senarathne
Kavinda Senarathne

Reputation: 2004

You should import an ScrollDispatchModule:

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

And add it into inports array in NgModule:

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

Upvotes: 0

Lambo14
Lambo14

Reputation: 251

You would need to define the viewport height. Refer a simple implementation at CodeSandbox Implementation.

.cdk-viewport {
    height: calc(100vh - 60px);
    width: 100vw;
}
<cdk-virtual-scroll-viewport
    fxLayout="row wrap"
    fxLayoutGap="16px grid"
    itemSize="400"
    class="cdk-viewport"
  >
    <mat-card
      class="mat-elevation-z4"
      *cdkVirtualFor="let num of [1,2,3,4,5,6,7]"
    >
      <mat-card-header>
        <mat-card-title>Mountains {{num}}</mat-card-title>
      </mat-card-header>
      <img mat-card-image src="./../assets/images/mountains.jpg" />
      <mat-card-content>
        <p>
          The Himalayas is a mountain range in Asia.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </cdk-virtual-scroll-viewport>

Upvotes: 6

Related Questions