Adding products to the carousel creates a new line in Angular4

Question

Work in the Angular4 application. In this I have a carousel, I showed popular products. In my case, in the default view, I displayed 3 products, when I clicked the left or right button, it will display 3 more products. I currently have 6 products (3 + 3), all are static values.

Problem:

When I add one or more products to the slider with static code, it generates a new line of slides.

I tried some examples, nothing works for me.

What I want to do is if I add more products to the carousel, the carousel should display all products as normal slides.

Note. Now I give static values. In fact, in my project, I will associate all the products with an API response that will include the image path, product name, price, hidden identifier.

I created a stackblitz file, there I saved all the static codes.

https://stackblitz.com/edit/angular-mn29mi?file=app%2Fapp.component.html

Dynamic code for binding API products.

<div class="col-sm-4" *ngFor="let slider of productData; let i = index">
    <div class="card">
       <div class="card-img-top card-img-top-250 one" >
           <img class="img-fluid" [src]="slider['PRODUCT_IMAGE']" alt="Carousel 1">
           <img routerLink="/my-cart" (click)="getProductName(Pname1)" class="img-fluid two" [src]="slider['PRODUCT_IMAGE_ONHOVER']" alt="Carousel 1">
       </div>
           <div class="card-block pt-2">
               <div class="col-sm-12 text-center card-text">
                   <span>{{slider.PRODUCT_NAME}}</span>
                   <br>
                   <input type="hidden" value="{{slider.PRODUCT_ID}}" #Pname1>
                   <br>
                   <span>{{slider.PRODUCT_PRICE}}</span>
               </div>
           </div>
   </div>
</div>

Normal:

Add Products:

Please help me dynamically associate products with the API and make the slider not generate new lines as the number of products increases.

Component Code:

export class LandingpageComponent {

  product_Name: any;
  productData: any;
  sliderPaths: any;
  sideMenuSliders : any;
  slider_Active_Item: any;
  side_Menu_Active_Item : string;
  slider_Sliding_Item : any;
  side_Menu_Slider_Image : any;

  constructor(private CartdataService: CartdataService, private router: Router,) {
    this.router.events.subscribe(
      () => window.scrollTo(0, 0) );
  }

  chunks(array, size) {
    let results = [];
    results = [];
    while (array.length) {
        results.push(array.splice(0, size));
    }
    return results;
}
  getProductName(Pname: any) {
    this.CartdataService.get_Product(Pname.textContent);
  }

  ngOnInit() {
    this.CartdataService.get_New_Products().subscribe(
      data => {
        this.productData = data
      });
  }
}

Answer 1

Here you go. All you have to do is split your data array into parts 3 and then skip it twice.

Component side:

ngOnInit() {
    this.CartdataService.get_New_Products().subscribe(
    data => {
        this.productData = this.chunks(data,3);
    });
}

chunks(array, size) {
    let results = [];
    results = [];
    while (array.length) {
        results.push(array.splice(0, size));
    }
    return results;
}

Template Side:

<div class="row row-equal carousel-item m-t-0" *ngFor="let chunkProducts of productData;">
    <div class="col-sm-4" *ngFor="let slider of chunkProducts;">
        <div class="card">
        <div class="card-img-top card-img-top-250 one" >
            <img class="img-fluid" [src]="slider['PRODUCT_IMAGE']" alt="Carousel 1">
            <img routerLink="/my-cart" (click)="getProductName(Pname1)" class="img-fluid two" [src]="slider['PRODUCT_IMAGE_ONHOVER']" alt="Carousel 1">
        </div>
            <div class="card-block pt-2">
                <div class="col-sm-12 text-center card-text">
                    <span>{{slider.PRODUCT_NAME}}</span>
                    <br>
                    <input type="hidden" value="{{slider.PRODUCT_ID}}" #Pname1>
                    <br>
                    <span>{{slider.PRODUCT_PRICE}}</span>
                </div>
            </div>
        </div>
    </div>
</div>

WORKING DEMO