Add Next and Previous arrows for image gallery (slider) in Angular

I have created a gallery in Angular that has one main photo at the top and 4 different images at the bottom of that image.

When clicking any of the bottom images the main image at the top is replaced.

Now I want to have arrows left and right of the main image, so i can slide through the images.

how to do that?

html file:

<section class="gallery">
    <div class="container shadow">
        <div class="img-container">
            <img id="mypreview" src="assets/images/1.png">
            <div class="img-prev text-center">
                <div class="img-slide activate">
                    <img src="assets/images/1.png" appdemo>
                </div>
                <div class="img-slide">
                    <img src="assets/images/2.png" appdemo>
                </div>
                <div class="img-slide">
                    <img src="assets/images/3.png" appdemo>
                </div>
                <div class="img-slide">
                    <img src="assets/images/4.png" appdemo>
                </div>
            </div>
        </div>
    </div>
</section>

directive file:

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[appDemo]'
})
export class DemoDirective {

  constructor(private el: ElementRef) { }

  @HostListener('click')
  imageChange(){
    var src:any = this.el.nativeElement.src;
    var prev:any = document.getElementById("mypreview");
    prev.src = src;
    var imageSlide = document.getElementsByClassName("img-slide");
    for (let i = 0; i < imageSlide.length; i++){
      imageSlide[i].classList.remove("activate");
    }
    this.el.nativeElement.parentElement.classList.add("activate");
  }
}