How to use *ngFor on grouped items in a slider?-CodePudding

I have a slider with groups of items like this:

<-- Group 1 -->
<div >
   <div > // <---- I want this to contain elements 0-4
</div>

<-- Group 2 -->
<div >
   <div > // <---- I want this to contain elements 5-10
</div>

<-- Group 3 -->
<div >
   <div > // <---- I want this to contain elements 11-15
</div>

How do I achieve this with the Angular *ngFor directive?

CodePudding user response：

 <-- Group 1 -->
<div  *ngFor="let item of items | slice:0:4">
   <div > // <---- I want this to contain elements 0-4
</div>

<-- Group 2 -->
<div  *ngFor="let item of items | slice:5:10">
   <div > // <---- I want this to contain elements 5-10
</div>

<-- Group 3 -->
<div  *ngFor="let item of items | slice:11:15">
   <div > // <---- I want this to contain elements 11-15
</div>

Ref: https://angular.io/api/common/SlicePipe

CodePudding user response：

I am not sure I fully understand your question. You are presenting just div's with class element where are the mentioned sliders? What type of data structure is "groups"? For more details you need to present some more info.

Anyway here is an possible example, how you could use *ngFor to generate the div's.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  items = [...Array(16).keys()];
  groups = [...Array(3).keys()];
}

<ng-container *ngFor="let group of groups">
  <div >
    Group: {{group}}
     <ng-container *ngFor="let item of items">
      <div  *ngIf="item < 5 && group == 0">Element: {{item}}</div>
      <div  *ngIf="item > 5 && item < 11 && group == 1">Element: {{item}}</div>
      <div  *ngIf="item > 9 && group == 2">Element: {{item}}</div>
     </ng-container>
  </div>
</ng-container>

Group: 0
Element: 0
Element: 1
Element: 2
Element: 3
Element: 4
Group: 1
Element: 6
Element: 7
Element: 8
Element: 9
Element: 10
Group: 2
Element: 10
Element: 11
Element: 12
Element: 13
Element: 14
Element: 15

Here is a working example: https://stackblitz.com/edit/angular-ivy-efxd9u?file=src/app/app.component.html

CodePudding user response：

As I can see you need three array data segregate from the parent array, that you need to manipulate the data from the parent array to the controller .ts and then render it in .html. Check the below code,

Demo: https://stackblitz.com/edit/angular-ivy-pebwzt?file=src/app/app.component.ts

app.component.ts

export class AppComponent implements OnInit {
  data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
  data1;
  data2;
  data3;
  ngOnInit() {
    this.data1 = this.data.slice(0, 5);
    this.data2 = this.data.slice(5, 11);
    this.data3 = this.data.slice(11);
  }
}

app.component.html

<h3>First Array</h3>
<div *ngFor="let d1 of data1">
  <div>{{ d1 }}</div>
</div>
<h3>Second Array</h3>
<div *ngFor="let d2 of data2">
  <div>{{ d2 }}</div>
</div>
<h3>Third Array</h3>
<div *ngFor="let d3 of data3">
  <div>{{ d3 }}</div>
</div>