Dynamic bootstrap 4 carousel with multiple images/cards in one slide in Angular 8

I am trying to design a dynamic carousel that has multiple cards/images in one row. I have first tried achieving multiple cards in one row but next and previous buttons weren’t working, so I searched online and found a solution for that now next and previous buttons are working fine, but I can see only one image in each slide. Below is my code,

<div id="myCarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item" *ngFor="let data of dummyData;let i = index"
                        [ngClass]="{'active' : i == 0}">
                        <div class="row">
                            <div class="col">
                                <div class="main-card">
                                    <span class="mt-4">
                                        {{data.class}} <br>
                                        {{data.when}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

One card in each row

This is what I want to design

required design

Can anyone tell me where I am going wrong. Any help is much appreciated.

Thank you!!

Answer

I was able to achieve this by creating nested array.

1. Get data from server
2. check screen size to decide how many images to show on carousel
3. send data and number of images in array to chunk method
4. Apply apply for loop in html

HTML

      <div class="carousel-item row  w-100  mx-3 text-center {{ i == 0 ? 'active' : '' }} m-t-0" style="margin-right: 70px;" *ngFor='let fav of userFavourite; let i = index' >
       <div  class=" d-flex justify-content-around w-100" >
       <div  class="mainSlide " style="align-content: center;" *ngFor="let x of fav;" >

          ///Enter each image from loop..etc

    </div>
    </div>
       </div>

TypeScript/Component.ts

    //get the image/data from server
   getUserFavourite() {
  this._productService.getUserFavourite(this.loggedInUsername).subscribe(
  (res) => {
    if( this.scrWidth>1300){
      this.favCount=4;
    } else if(this.scrWidth<1300 && this.scrWidth>1025){
this.favCount='3';
    } else if(this.scrWidth<1025  ){
      this.favCount='2';
          }
          else if(this.scrWidth<600 ){
            this.favCount='1';
                }
    this.userFavourite = this.chunks(res,this.favCount);
    console.log(this.userFavourite);
  },
  (err) => {
    this.error = err;
  }
);
}

  /**************************************************************** */
  //gets the size of window screen to adjust number of images in an array to fit carousel
  @HostListener('window:resize', ['$event'])
getScreenSize(event?) {
      this.scrHeight = window.innerHeight;
      this.scrWidth = window.innerWidth;
      console.log(this.scrHeight, this.scrWidth);
}
 /******************************************************************** */   

 //adds images from server to array
chunks(array, size) {
let results = [];
results = [];
while (array.length) {
results.push(array.splice(0, size));
}
return results;
 }