Reports

Here is an approach you could use:

Create an ImageSlider component, which takes a list of images as in an input, and keeps track of the current slide

export class ImageSliderComponent {
  @Input() images: string[];

  slideIndex: number = 0;

  changeSlide(n: number) {
    this.slideIndex += n;
  }
}
In the template, display only the active slide (refer to the img src binding):

<div class="slideshow-container" #myDiv>
  <div class="mySlides fade">
    <div class="numbertext">{{ slideIndex + 1}} / {{ images.length }}</div>
    <img
    [src]="images[slideIndex]" 
    style="width:100%"
  />
    <div class="text">Caption Text</div>
  </div>

  <a class="prev" (click)="changeSlide(-1)">&#10094;</a>
  <a class="next" (click)="changeSlide(1)">&#10095;</a>
</div>

Use your component like:

<app-image-slider [images]="[
  'http://images.com/image1.jpg',
  'http://images.com/image1.jpg',
  'http://images.com/image3.jpg']"></app-image-slider>

https://stackblitz.com/edit/angular-ivy-xppajp?file=src%2Fapp%2Fimage-slider.component.ts

79186661