[Fixed] How to display multiple item carousel using Angular 9?

Issue

I have the following piece of code. I would like to implement Carousel functionality using Angular 9 without using any libraries.

Currently, all the data items are coming in a row(they are going outside of the given border-width).

But, I need like, the given data items should display the first six items in a row by default within the given border width on execution. Then, If I click Next, then the remaining data items should be displayed inside that border width only, and similarly, if I click on Previous, then previous data items should be displayed inside the given border-width only.

html:

<div class="previous" title="Previous" (click)="previous()">Previous</div>
<div class="data-row">
  <div class="data-list show-in-row">
    <ng-container *ngFor="let item of testData; let index = index; let last = last">
      <div class="data-container">
        <div>{{ item.name }}</div>
      </div>
    </ng-container>
  </div>
</div>
<div class="next" title="Next" (click)="next()">Next</div>

app.component.ts:

export class AppComponent {
  testData: any;
  constructor(private myServices: MyServices) {}
  ngOnInit() {
    this.myServices.getData().subscribe(
      data => {
        this.testData = data;
        console.log("data: "+JSON.stringify(this.testData));//[{"id":1,"name":"First"},{"id":2,"name":"Second"},{"id":3,"name":"Third"},{"id":4,"name":"Fourth"},{"id":5,"name":"Fifth"},{"id":6,"name":"Sixth"},{"id":7,"name":"Seventh"},{"id":8,"name":"Eigth"},{"id":9,"name":"Ninth"}]
      },
      (err: HttpErrorResponse) => {
        console.log("error on parsing: " + err.message);
      }
    );
  }

  previous() {}
  next() {}
}

Created Stackblitz

Kindly any one can help me regarding this. Thanks in advance.

Solution

To show maximum six columns in the container ‘data-row’, each column ‘data-container’ must take up to 16,667% in width (= 100 divided by 6).

.data-container {
  width: 16.667%;
  text-align: center;
}

To be able to show only six items of our array we will create a second array containing only those six items. We will also need to keep track of which iteration we are in to know which items of our carousel to show. First six, second six, etc.

testData: any;
testDataShown: any;
iTestData: number;

We create a function that gets six items out of our full array based on the current iteration:

setShownData(){
    this.testDataShown = this.testData.slice(this.iTestData*6, (this.iTestData+1)*6);
}

And then finally, we create our next and previous functions to modify the iteration number and modify the shown data array.

previous() {
    if(this.iTestData != 0) {
      this.iTestData = this.iTestData - 1;
      this.setShownData();
    }
}

next() {
    if( ((this.iTestData+1) * 6) < this.testData.length){
      this.iTestData = this.iTestData + 1;
      this.setShownData();
    }
}

You can find your modified Stackblitz here.

NB: Adding a fixed column width makes your website non-responsive. You should really consider using a responsive design framework (f.ex. Bootstrap).