I have a weird issue, for which I've been unable to identify the root cause. I have an angular app and it has a carousel that displays text instead of images, every slide has a remove button, it calls a method that receives the index and then removes the element from the carousel. If I remove any item but the first one the carousel then disappears.

Here is my example code, it's fully reproducible on stackblitz:

import { ChangeDetectorRef, Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular';

  myCarouselItems = ['slide 1', 'slide 2', 'slide 3'];

  constructor(private cdref: ChangeDetectorRef) {}

  deleteItem(index): void {
    this.myCarouselItems.splice(index, 1);
    this.cdref.detectChanges();
  }
}

HTML

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div
      class="carousel-item"
      *ngFor="let item of myCarouselItems; index as i; let isFirst = first"
      [ngClass]="{ active: i === 0 }"
      style="text-align: center;"
    >
      <p>{{ item }}</p>
      <a style="cursor: pointer" (click)="deleteItem(i)">Delete this element</a>
    </div>
  </div>
  <a
    class="carousel-control-prev"
    href="#carouselExampleControls"
    role="button"
    data-slide="prev"
    style="background-color: red;"
  >
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a
    class="carousel-control-next"
    href="#carouselExampleControls"
    role="button"
    data-slide="next"
    style="background-color: red;"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Link to the stackblitz https://stackblitz.com/edit/angular-simple-bootstrap-navbar-sdzr55?file=src/app/app.component.html

Anybody knows how can I fix this?