src/app/components/notifications-list/notifications-list.component.html

<cdk-virtual-scroll-viewport itemSize="50" class="viewport" minBufferPx="1200" maxBufferPx="1200">
    <div #notification_parent class="notification-card-parent card-radius mat-elevation-z2" *cdkVirtualFor="let notification of notifications; let i = index;">
        <mat-card class="notification-card card-radius">
            <mat-card-header>
                <mat-card-subtitle>
                    <div>
                        <span class="notification-timestamp">{{notification.timestamp * 1000 | date:'short'}}</span>
                    </div>
                </mat-card-subtitle>
                <mat-card-title>
                    <ng-container *ngIf="NOTIFICATION_PREFIX[notification.type]">
                        {{NOTIFICATION_PREFIX[notification.type]}}
                    </ng-container>
                </mat-card-title>
            </mat-card-header>
            <mat-card-content>
                <ng-container *ngIf="NOTIFICATION_SUFFIX_KEY[notification.type]">
                    <div style="word-break: break-word">
                        {{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}}
                    </div>
                </ng-container>
            </mat-card-content>
            <mat-card-actions class="notification-actions" *ngIf="notification.actions?.length > 0">
                <button matTooltip="Remove" i18n-matTooltip="Remove" (click)="emitDeleteNotification(notification.uid)" mat-icon-button><mat-icon>close</mat-icon></button>
                <span *ngFor="let action of notification.actions">
                    <button [matTooltip]="NOTIFICATION_ACTION_TO_STRING[action]" (click)="emitNotificationAction(notification, action)" mat-icon-button><mat-icon>{{NOTIFICATION_ICON[action]}}</mat-icon></button>
                </span>
            </mat-card-actions>
            <span *ngIf="!notification.read" class="dot"></span>
        </mat-card>
    </div>
</cdk-virtual-scroll-viewport>