Separate every set of 6 elements into individual DIVs, with any remaining elements placed

Question

Separate every set of 6 elements into individual DIVs, with any remaining elements placed

I have an array containing a total of n items. My goal is to group every 6 items into separate div elements. However, if the array has 15 items, I struggle to group the last three remaining items.

Although the following code successfully groups every 6 elements, it does not handle the last 3 remaining items:

<ng-container *ngFor="let item of mockData; let i = index;">
          <div class="inner-wrap" *ngIf="(i+1) % 6 ==0">
            <p *ngIf="mockData[i-5]">{{ mockData[i-5] }}</p>
            <p *ngIf="mockData[i-4]">{{ mockData[i-4] }}</p>
            <p *ngIf="mockData[i-3]">{{ mockData[i-3] }}</p>
            <p *ngIf="mockData[i-2]">{{ mockData[i-2] }}</p>
            <p *ngIf="mockData[i-1]">{{ mockData[i-1] }}</p>
            <p>{{ item  }} </p>
          </div>
</ng-container>

angular typescript angular6

Answer 1

Answer №1

To demonstrate the concept, we will create sub-arrays, iterate through them, and then loop through each sub-array to display it as a div element

To achieve this functionality in your .ts file, you can implement the following function:

createMockGroup() {
    return (mockData || [])
      .reduce((a, _, i, arr) => {
        if (i % 6 === 0)
          a.push(arr.slice(i, i + 6));
        return a;
      }, []);
}

In your .html file, make the necessary changes as shown below:

<ng-container *ngFor="let group of createMockGroup()">
    <div class="inner-wrap">
      <ng-container *ngFor="let item of group">
         <p>{{ item }} </p>
      </ng-container>
    </div>
</ng-container>

This approach eliminates the need to explicitly use the index variable

Answer 2

To demonstrate the concept, we will create sub-arrays, iterate through them, and then loop through each sub-array to display it as a div element

To achieve this functionality in your .ts file, you can implement the following function:

createMockGroup() {
    return (mockData || [])
      .reduce((a, _, i, arr) => {
        if (i % 6 === 0)
          a.push(arr.slice(i, i + 6));
        return a;
      }, []);
}

In your .html file, make the necessary changes as shown below:

<ng-container *ngFor="let group of createMockGroup()">
    <div class="inner-wrap">
      <ng-container *ngFor="let item of group">
         <p>{{ item }} </p>
      </ng-container>
    </div>
</ng-container>

This approach eliminates the need to explicitly use the index variable

Answer 3

Answer №2

Make sure to also verify if there is any remaining items after grouping by 6. Below is an example of code snippet:

<ng-container *ngFor="let item of mockData; let i = index;">
          <div class="inner-wrap" *ngIf="(( (i+6) < mockData.length) && ((i+1) % 6 ==0)) || (i == mockData.length - (mockData.length % 6))">
            <p *ngIf="mockData[i-5]">{{ mockData[i-5] }}</p>
            <p *ngIf="mockData[i-4]">{{ mockData[i-4] }}</p>
            <p *ngIf="mockData[i-3]">{{ mockData[i-3] }}</p>
            <p *ngIf="mockData[i-2]">{{ mockData[i-2] }}</p>
            <p *ngIf="mockData[i-1]">{{ mockData[i-1] }}</p>
            <p>{{ item  }} </p>
          </div> 
</ng-container>

Answer 4

Make sure to also verify if there is any remaining items after grouping by 6. Below is an example of code snippet:

<ng-container *ngFor="let item of mockData; let i = index;">
          <div class="inner-wrap" *ngIf="(( (i+6) < mockData.length) && ((i+1) % 6 ==0)) || (i == mockData.length - (mockData.length % 6))">
            <p *ngIf="mockData[i-5]">{{ mockData[i-5] }}</p>
            <p *ngIf="mockData[i-4]">{{ mockData[i-4] }}</p>
            <p *ngIf="mockData[i-3]">{{ mockData[i-3] }}</p>
            <p *ngIf="mockData[i-2]">{{ mockData[i-2] }}</p>
            <p *ngIf="mockData[i-1]">{{ mockData[i-1] }}</p>
            <p>{{ item  }} </p>
          </div> 
</ng-container>

Answer 5

Answer №3

Looking at the code snippet provided:

<ng-container *ngFor="let item of mockData; let i = index;">
  <div class="inner-wrap" *ngIf="i % 6 ==0">
    <p>{{ item }} </p>
    <p *ngIf="mockData[i+1]">{{ mockData[i+1] }}</p>
    <p *ngIf="mockData[i+2]">{{ mockData[i+2] }}</p>
    <p *ngIf="mockData[i+3]">{{ mockData[i+3] }}</p>
    <p *ngIf="mockData[i+4]">{{ mockData[i+4] }}</p>
    <p *ngIf="mockData[i+5]">{{ mockData[i+5] }}</p>
  </div>
</ng-container>

Check out the live example here

Answer 6

Looking at the code snippet provided:

<ng-container *ngFor="let item of mockData; let i = index;">
  <div class="inner-wrap" *ngIf="i % 6 ==0">
    <p>{{ item }} </p>
    <p *ngIf="mockData[i+1]">{{ mockData[i+1] }}</p>
    <p *ngIf="mockData[i+2]">{{ mockData[i+2] }}</p>
    <p *ngIf="mockData[i+3]">{{ mockData[i+3] }}</p>
    <p *ngIf="mockData[i+4]">{{ mockData[i+4] }}</p>
    <p *ngIf="mockData[i+5]">{{ mockData[i+5] }}</p>
  </div>
</ng-container>

Check out the live example here

Answer 7

Answer №4

<ng-container *ngFor="let groupIndex of createGroupData(mockData, 6);">
    <div class="wrap-inner">
        <p *ngIf="mockData[(groupIndex*6)]">{{ mockData[(groupIndex*6)] }}</p>
        <p *ngIf="mockData[(groupIndex*6)+1]">{{ mockData[(groupIndex*6)+1] }}</p>
        <p *ngIf="mockData[(groupIndex*6)+2]">{{ mockData[(groupIndex*6)+2] }}</p>
        <p *ngIf="mockData[(groupIndex*6)+3]">{{ mockData[(groupIndex*6)+3] }}</p>
        <p *ngIf="mockData[(groupIndex*6)+4]">{{ mockData[(groupIndex*6)+4] }}</p>
        <p *ngIf="mockData[(groupIndex*6)+5]">{{ mockData[(groupIndex*6)+5] }}</p>
    </div>
</ng-container>

add this function to your component:

createGroupData(array, num){
    let groups = [];
    let maxNumber = (array.length % num) == 0 ? (array.length / num) : (array.length / num)+1;

    for(var i = 0; i < maxNumber; i++) {
        groups.push(i);
    }
    return groups;
}

Answer 8

<ng-container *ngFor="let groupIndex of createGroupData(mockData, 6);">
    <div class="wrap-inner">
        <p *ngIf="mockData[(groupIndex*6)]">{{ mockData[(groupIndex*6)] }}</p>
        <p *ngIf="mockData[(groupIndex*6)+1]">{{ mockData[(groupIndex*6)+1] }}</p>
        <p *ngIf="mockData[(groupIndex*6)+2]">{{ mockData[(groupIndex*6)+2] }}</p>
        <p *ngIf="mockData[(groupIndex*6)+3]">{{ mockData[(groupIndex*6)+3] }}</p>
        <p *ngIf="mockData[(groupIndex*6)+4]">{{ mockData[(groupIndex*6)+4] }}</p>
        <p *ngIf="mockData[(groupIndex*6)+5]">{{ mockData[(groupIndex*6)+5] }}</p>
    </div>
</ng-container>

add this function to your component:

createGroupData(array, num){
    let groups = [];
    let maxNumber = (array.length % num) == 0 ? (array.length / num) : (array.length / num)+1;

    for(var i = 0; i < maxNumber; i++) {
        groups.push(i);
    }
    return groups;
}

Answer 9

Answer №5

within your component

@Pipe({
    name: 'filter'
})
@Injectable()
export class FilterPipe implements PipeTransform {
    transform(items: any[]): any[] {
     const result = [];
     for (var i = 0; i < items.length; i += 6) {
      result.push(items.slice(i, i + 6));
     }
     return result;
    }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  number = ['', ' ', '', '', '', '', '', '' ];

}

and in the html

<div *ngFor="let item of number | filter ; let i = index" style="border: 1px solid;margin-bottom:20px">
<div *ngFor="let element of item; let j = index" style="">
  element {{i}} , {{j}}
</div>
</div>

Try it out on StackBlitz - https://stackblitz.com/edit/angular-ppnxnm

Answer 10

within your component

@Pipe({
    name: 'filter'
})
@Injectable()
export class FilterPipe implements PipeTransform {
    transform(items: any[]): any[] {
     const result = [];
     for (var i = 0; i < items.length; i += 6) {
      result.push(items.slice(i, i + 6));
     }
     return result;
    }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  number = ['', ' ', '', '', '', '', '', '' ];

}

and in the html

<div *ngFor="let item of number | filter ; let i = index" style="border: 1px solid;margin-bottom:20px">
<div *ngFor="let element of item; let j = index" style="">
  element {{i}} , {{j}}
</div>
</div>

Try it out on StackBlitz - https://stackblitz.com/edit/angular-ppnxnm

Separate every set of 6 elements into individual DIVs, with any remaining elements placed

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Spread an all-encompassing category across a collection

Unable to associate with 'userID' as it is not a recognizable attribute of 'view-user'

Any tips on how to personalize the loading animation for single pages using CSS and GIFs?

Issue encountered: Nuxt 3 fails to locate the useRoute import

What is the reason for the inconsistency between Angular locale definition files and the corresponding locale identifiers used for registerLocaleData?

Premature updates detected in state cloning process

Restrain a Key according to the data type of its value within a universal category

Using type definitions in non-TS files with VSCode: A beginner's guide

"ng-new" is not currently present in the "@schematics/angular" collection

Exploring the proper way to infer generic types for Redux Toolkit Slices

Unable to display the attributes of an object using console.log

Is there a way to accurately identify the type of error that arises from a promise?

What is the reason for TypeScript's prioritization of arguments over assignment in generic inference?

Troubleshooting typescript error in styled-components related to Material-UI component

Dayjs is failing to retrieve the current system time

Is it better for a data service's observable to emit a sequence of objects or an array of objects?

Executing a TypeScript function through a package.json script: A guide

Issues with Angular polyfills core-js causing unexpected behavior in IE11

What is the best way to automatically close a sidebar in Angular 8 depending on the window size when the page loads?

What is the best way to set up the user's editable information in the input field?