title: Adding products in carousel generates new row in Angular4
body: <p>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 clicked on left or right button it will display another 3 products .
  currently I have 6 products (3+3) all are static values.</p>
  
  <p>Issue :</p>
  
  <p>When I add another 1 or more product in slider by static code it generates a new row of slides.</p>
  
  <p>I have tried some examples nothing is worked for me.</p>
  
  <p>What I want to do is If I add more products in carousel,carousel must display all the products as the normal slides .</p>
  
  <p>Note : Now I have give the static values ,Actually in my project I will bind all the products from API response which will include image path,productname,price,hidden id.</p>
  
  <p>I have created an stackblitz file there I kept all the static codes.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-mn29mi?file=app%2Fapp.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-mn29mi?file=app%2Fapp.component.html</a></p>
  
  <p>Dynamic code for binding products from API.</p>
  
  <pre><code>&lt;div class="col-sm-4" *ngFor="let slider of productData; let i = index"&gt;
      &lt;div class="card"&gt;
         &lt;div class="card-img-top card-img-top-250 one" &gt;
             &lt;img class="img-fluid" [src]="slider['PRODUCT_IMAGE']" alt="Carousel 1"&gt;
             &lt;img routerLink="/my-cart" (click)="getProductName(Pname1)" class="img-fluid two" [src]="slider['PRODUCT_IMAGE_ONHOVER']" alt="Carousel 1"&gt;
         &lt;/div&gt;
             &lt;div class="card-block pt-2"&gt;
                 &lt;div class="col-sm-12 text-center card-text"&gt;
                     &lt;span&gt;{{slider.PRODUCT_NAME}}&lt;/span&gt;
                     &lt;br&gt;
                     &lt;input type="hidden" value="{{slider.PRODUCT_ID}}" #Pname1&gt;
                     &lt;br&gt;
                     &lt;span&gt;{{slider.PRODUCT_PRICE}}&lt;/span&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please help me to dynamically bind the products from API and  make the slider will not generate new rows when number of product increase.</p>
  
  <p>Component code :</p>
  
  <pre><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(
        () =&gt; 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 =&gt; {
          this.productData = data
        });
    }
  }
  </code></pre>