0

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

Alpha
  • 1,413
  • 3
  • 9
  • 23

0 Answers0