I'm trying to make a virtual scroll in Angular 14, but I haven't been capable of.
This is my code
<mat-drawer-container class="rounded" [hasBackdrop]="false">
<mat-drawer
class="box-border h-auto w-72"
#drawer
[mode]="'over'"
position="end"
>
<div class="flex text-medium text-secondary font-bold p-2 border rounded">
<span class=""> Notificaciones </span>
<button class="w-full text-right" (click)="drawer.toggle()">
<mat-icon> close </mat-icon>
</button>
</div>
<cdk-virtual-scroll-viewport
[itemSize]="50"
>
<div
*cdkVirtualFor="let inbox of aplicationsDataUser; let i = index"
class="p-1 px-3 border w-70 grid gap-3"
>
<div>
<p class="text-xs text-left">
{{ inbox.createAt | date : "shortDate" }}
</p>
</div>
<div>
<button class="" (click)="linkRedirection(i)">
<span class="text-base text-[#071330] text-justify font-bold">{{
inbox.message
}}</span>
</button>
</div>
<div class="grid sm:grid-cols-2">
<div>
<!-- {{ inbox.usersRead.length > 0 ? true : false }} -->
<button>
<mat-icon
[ngStyle]="{
color: inbox.usersRead.length > 0 ? '#2ECC71' : 'grey'
}"
(click)="messageView(i)"
class="text-lg"
>
check_circle
</mat-icon>
</button>
</div>
<div>
<p class="text-xs text-right">
{{ inbox.createAt | date : "shortTime" }}
</p>
</div>
</div>
</div>
</cdk-virtual-scroll-viewport>
<button class="w-full bg-[#071330] text-white p-4">
<div>"Mostras mas notificaciones"</div>
</button>
</mat-drawer>
As I am working with Tailwind
I tried to make the container again but in SCSS and add those attributes to the cdk-virtual-scroll-viewport
, as I have seen in other solutions, but it hasn't work