I'm facing an issue with implementing cdk-virtual-scroll in my chat application. Unfortunately, it's not showing anything on the screen. Strangely, when I resort to using the regular "ngFor", everything works smoothly. However, as soon as I switch to cdkVirtualFor, the content doesn't show up. Take a look at the code snippet below for further insight.
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;
}
I would greatly appreciate your feedback on what might be going wrong here. Rest assured, the chat history data is present and verified. Thank you!