carousel slider displays single item in Angular4 - html

Question

Working in an Angular4 project in this ,I have used carousel for displaying products,Products are binding from API response .
In my carousel I display the products like single row 3 column format ,If API returns 10 products the 10 th product is get displayed single slide .
I want to merge the 10th product with 1st and 2nd product then display like a 3 column slide .
Html
<div class="col-sm-9">
<section class="container">
<div class="row">
<div class="col-sm-1">
<i class="fa fa-user" style="font-size:25px"></i>
</div>
<div class="col-sm-9">
<h5>Popular Products</h5>
</div>
</div>
</section>
<hr>
<section class="carousel slide" id="myCarousel">
<div class="container">
<div class="row">
<div class="col-sm-12 text-right mb-4">
<a class="btn btn-outline-secondary carousel-control left" href="#myCarousel" data-slide="prev" title="go back">
<i class="fa fa-lg fa-chevron-left"></i>
</a>
<a class="btn btn-outline-secondary carousel-control right" href="#myCarousel" data-slide="next" title="more">
<i class="fa fa-lg fa-chevron-right"></i>
</a>
</div>
</div>
</div>
<div class="container p-t-0 m-t-2 carousel-inner">
<div class="row row-equal carousel-item {{ i == 0 ? 'active' : '' }} m-t-0" *ngFor="let chunkProducts of productData;let i =index;">
<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" 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>
</div>
</section>
This is my html file to show the slide as 3 column format.
Component
ngOnInit() {
this.CartdataService.get_New_Products().subscribe(
data => {
this.productData = this.chunks(data,3);
console.log(this.productData);
});
chunks(array, size) {
let results = [];
results = [];
while (array.length) {
results.push(array.splice(0, size));
}
return results;
}

Answer 1

Just Change :
this.CartdataService.get_New_Products().subscribe(data => {
this.productData = this.chunks(data.json(),3);
let last = this.productData[this.productData.length-1].length;
if(this.productData.length > 1 && last < 3) {
this.productData[this.productData.length-1] = [ ...this.productData[this.productData.length-1] , ...this.productData[0].slice(0, 3-last) ];
}
});
WORKING DEMO