Adding products in carousel generates new row in Angular4

Question

Working in an Angular4 application,In this I have a carousel were I have shown the popular products .In my case in the default view I have displayed 3 products when I clicke

Answer 1

Here you go, All you need to do is chunk your data array in to parts of 3 , then loop through it twice this way.

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