Unable to load dynamic images on button click using Angular 6

I am loading 3 sets of dynamic images on a button click:

Before button click a default image has to be showed --> it is working as single image

On button click whatever images are there in the array based on the button id it has to load and display

Issues :

After clicking on data set one (i.e id : 1), based images have to load and overwrite the default image, but along with data set one image, the default image is also showing and 1st position image is missing.

Likewise whenever I click on the other button, the images are loading but it is displaying the previous image (last button last image) and also the 1st array index image is not displaying

The below is the default image before the button is clicked:

images =[

 {
"img": "https://dummyimage.com/200x200/000/fff.jpg&text=a"
 }
 ];

Buttons are generated using dynamic data:

 buttonData = [
       {
         "id": 1,
         "name":"Data Set One"
       },
       {
        "id": 2,
        "name":"Data Set Two"
      },
      {
        "id": 3,
        "name":"Data Set Three"
      }
     ]


     count: number;
     currentImgUrl: string ;

  constructor(){
        this.count = 0;
        this.setImgUrl();
  }




    next(): void {
      this.count++;
      if (this.count >= this.images.length)
        this.count = 0;
      this.setImgUrl();
    }

    prev(): void {
      this.count--;
      if (this.count < 0)
        this.count = this.images.length - 1;
      this.setImgUrl();
    }

    setImgUrl(): void {
      this.currentImgUrl = this.images[this.count].img;
    }

       getImageData(id){
      this.images=[];
     if(id===1){

       this.count =0;
       this.images = [
          {
            "img":"https://dummyimage.com/200x200/000/fff.jpg&text=B"
          },
          {
           "img":"https://dummyimage.com/200x200/000/fff.jpg&text=C"
         },
         {
           "img":"https://dummyimage.com/200x200/000/fff.jpg&text=D"
         },
         {
           "img":"https://dummyimage.com/200x200/000/fff.jpg&text=E"
         },
         {
           "img":"https://dummyimage.com/200x200/000/fff.jpg&text=F"
         },
         {
           "img":"https://dummyimage.com/200x200/000/fff.jpg&text=G"
         }
        ];
     }
     if(id===2){

      this.count =0;
      this.images = [
         {
           "img":"https://dummyimage.com/200x200/000/fff.jpg&text=H"
         },
         {
          "img":"https://dummyimage.com/200x200/000/fff.jpg&text=I"
        },
        {
          "img":"https://dummyimage.com/200x200/000/fff.jpg&text=J"
        }
       ];
    }
    if(id===3){

      this.count =0;
      this.images = [
          {
           "img":"https://dummyimage.com/200x200/000/fff.jpg&text=K"
         },
         {
          "img":"https://dummyimage.com/200x200/000/fff.jpg&text=L"
        },
        {
          "img":"https://dummyimage.com/200x200/000/fff.jpg&text=M"
        }
       ];
    }

    }

.html code

<div class="container">
  <div class="row">
     <div class="col-xs-3 help_modal">
                                    <div *ngFor="let btnData of buttonData">
                                        <button type="button" class="btn btn-primary" id="{{btnData.id}}" (click)="getImageData(btnData.id)">{{btnData.name}}</button>
                                    </div>
                                </div>

<div  class="col-xs-9">
                                    <img [src]="currentImgUrl" style="width: 50%">
                                </div>

  </div>


                                 <button type="button" (click)="prev()" [disabled]="count == 0" class="btn btn-primary">Prev</button>
                            <button type="button" (click)="next()" [disabled]="count == images.length - 1" class="btn btn-primary">Next</button>


</div> 

Here is my stackblitz working link: https://stackblitz.com/edit/angular-yoey9z