0

I am trying to use cdk-virtual-viewpoint in my chat application. Sadly, it doesn't render anything. When I try to use the normal "ngfor" it works fine. But when I use cdkVirtualfor it does not display anything. Please refer to the code below for more details.

chatbox.component.ts---

<cdk-virtual-scroll-viewport itemSize="100" class = "cdk">
          <div *cdkVirtualFor="let item of chat_history" class="chat-data">
            <ul>
             <li class = "me">{{item.message}}</li>
            </ul>
          </div>
</cdk-virtual-scroll-viewport>

app.module.ts------

@NgModule({
  declarations: [AppComponent, ChatboxComponent],
  imports: [BrowserModule, AppRoutingModule, HttpClientModule, ScrollingModule],
  providers: [{provide: APP_BASE_HREF, useValue: '/consumer/'}],
  bootstrap: [AppComponent],
})

chatboxcomponent.css-----
.form-container .chat-data {
  height: 100px;
}


.form-container .cdk {
  height: 500px;
}

Please let me know on what I am doing right. Trust me on this but chat history does have data. I have checked it.

dom.macs
  • 776
  • 7
  • 15
Needyboy
  • 41
  • 9

2 Answers2

0
just Add this :
<ng-container *ngIf="chat_history">
  <cdk-virtual-scroll-viewport
    itemSize="100"
    minBufferPx="200"
    maxBufferPx="400"
    style="height: 60rem"
  >
    ...`enter code here`
  </cdk-virtual-scroll-viewport>
</ng-container>
Adham Moamer
  • 46
  • 3
0

basically you have to assign the veiwport a height otherwise it wont appear at all. The minBufferPx determines the minimum amount of pixels it will populate with data and max is analagously the maximum amount of pixels. I try to set the minBufferPx at least a little larger than the veiwport height so any data immediately out of sight is loaded before the user scrolls to it.

KosolapiMikha
  • 1