Angular Ionic slider blank after collection update

I have an instance of ion-slides on my page displaying some images:

<ion-slides class="to-top" pager>
    <ion-slide *ngFor="let image of detailImages">
        <img src="" alt="">
    </ion-slide>
</ion-slides>

The collection detailImages is loaded at the start on page load and is an collection of strings containing image URLs that point to my media provider. So far this implementation works well. However, whenever I remove an item from detailImages, the whole pager goes blank (white) with nothing to scroll through.

Here is the code that removes the image from the collection:

deleteImage(imageURL: any) {
    this.detailService.deleteDetailImage({ imageURL: imageURL }).pipe(
        map(resp => {
            //Do some mapping working
        })
    ).subscribe(result => {
        if (result) {
            this.detailImages.splice(this.slides.getActiveIndex(),1);
            this.slides.update();
            this.toastCtrl.create({ message: "Image Removed", showCloseButton: true,duration:3000 }).present();
        }
    });
}

I did try to update the slider:

 @ViewChild(Slides) slides: Slides;

 // and then after remove item call this
 this.slider.update();

But this had no effect. I am not sure if it is an Angular issue or Ionic Issue.

I'm using Angular 5.0.3 nad Ionic-Angular 3.9.2

from Angular Ionic slider blank after collection update