Virtual scrolling with buttons and mutable list

[Chris Hennick]

Hi all,

I've been using virtual scrolling like so:

<div class="cdk-virtual-scroll-data-source-example" *ngIf="editMode || item.images[0]">
<cdk-virtual-scroll-viewport orientation="horizontal" itemSize="230" class="example-viewport">
<div *cdkVirtualFor="let mediaItem of item.images; let index = index;" (click)="selectMedia(index)" class="example-item"
><img [src]="urlConverter.getThumbnail(mediaItem)" [alt]="getCaption(mediaItem)"/></div>
<div *ngIf="editMode" class="example-item" (click)="openImageUpload()"><img src="assets/ui/addpic.svg" alt="Upload photo..."></div>
</cdk-virtual-scroll-viewport>
</div>

However, I have two issues with it:

First, the client has asked if I can eliminate the scroll bar and use a pair of tall left- and right-pointing triangular buttons. Does cdk-virtual-scroll-viewport expose the methods that perform the scrolling, so that I can make those methods the click handlers for the buttons?

Second, the list doesn't update when I delete the selected image, with a button whose click handler is:

deleteSelectedImage() {
this.item.images.splice(this.selectedIndex);
}

What's the easiest way to fix both issues?