Creating a custom Angular filter to group every 3 items within an iteration into a new div container

Question

Creating a custom Angular filter to group every 3 items within an iteration into a new div container

When attempting to organize three instances of app-story-preview within a wrapper div using a ngFor loop, I encountered the following code:

<ng-template [ngIf]="stories.length > 0" [ngIfElse]="empty">
    <cdk-virtual-scroll-viewport [itemSize]="itemSize | async" (scrolledIndexChange)="nextBatch()">

        <ng-container *cdkVirtualFor="let story of stories; let i = index; trackBy:trackById">
            <div class="inner-wrap" *ngIf="(i+1) % 3 !== 1">
                <app-story-preview class="fade-in-animation" [layout]="layout | async" [item]="story"></app-story-preview>
            </div>
        </ng-container>

    </cdk-virtual-scroll-viewport>
</ng-template>

Despite my belief that this code would group three instances of app-story-preview within the div.inner-wrap, only one instance seems to be included. Can anyone pinpoint what I am doing incorrectly?

javascript angular typescript modulo

Answer 1

Answer №1

If you want to change your stories array into an array of subarrays with 3 elements each, you can try the following approach:

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let size = 3;
let result = [];
for (let i = 0; i <Math.ceil(array.length/size); i++){
    result[i] = array.slice((i*size), (i*size) + size);
}

Once you have transformed your array, you can use it in your code like this:

<ng-container *cdkVirtualFor="let storyBlock of stories; let i = index;">
                <div class="inner-wrap" *ngFor="let story of storyBlock">
                    <app-story-preview class="fade-in-animation" [layout]="layout | async" [item]="story"></app-story-preview>
                </div>
</ng-container>

Answer 2

If you want to change your stories array into an array of subarrays with 3 elements each, you can try the following approach:

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let size = 3;
let result = [];
for (let i = 0; i <Math.ceil(array.length/size); i++){
    result[i] = array.slice((i*size), (i*size) + size);
}

Once you have transformed your array, you can use it in your code like this:

<ng-container *cdkVirtualFor="let storyBlock of stories; let i = index;">
                <div class="inner-wrap" *ngFor="let story of storyBlock">
                    <app-story-preview class="fade-in-animation" [layout]="layout | async" [item]="story"></app-story-preview>
                </div>
</ng-container>

Creating a custom Angular filter to group every 3 items within an iteration into a new div container

Answer №1

Similar questions

What is the appropriate event type to pass to the onKeyPressed function in a React application utilizing MaterialUI and written with Typescript?

Unable to refresh JSON data in Datatables

Creating a fixed column in an Angular Material Table for enhanced user experience

Load a script in a specific div using React

Encountering a 404 Error while attempting to access a locale in Angular 5

Unable to perform real-time transpilation of ES module, a loader plugin must be set up through the SystemJS.config configuration

Discovering the best method to retrieve user details (email address) following a successful login across all pages or components within Angular

What steps can be taken to enhance cleanliness and efficiency, and what are some recommended practices to adhere to?

The current date is cycling back to the month before

Guidelines for returning an object upon finishing the .map function within a promise-based function in Node.js

What steps should be followed to implement ng-zorro-antd?

Validation Form Controls

Trying to decide between using a Javascript or HTML5 PDF Editor?

What is the best way to adjust the content of a Bootstrap Column to be at the bottom of the column

In what specific format does this plugin expect the callback string to be encoded as? (jquery-ui-multisearch)

Endless cycle of React hooks

Tips on creating a horizontal scrolling effect using the mouse

Incorrect outcome when utilizing ajax to update a div within a for each loop

Images fail to display on iOS devices using the Ionic Framework

"Utilizing Bootstrap Modal for efficient AJAX saving of multiple records with the help of bootstrapValidator