Implementing ngFor to group values within div containers according to specific keys

Question

Implementing ngFor to group values within div containers according to specific keys

In my Angular application, I am working with an array named calendarDates that holds various date-related information.

calendarDates = [
  {"date": "2018-10-23", "day": 5, "month":10, "year":2018, "price":"500", "date_is_valid": true},
  {"date": "2018-10-24", "day": 6, "month":10, "year":2018, "price":"550", "date_is_valid": false},
  ...
  {"date": "2018-11-01", "day": 1, "month":11, "year":2018, "price":"600", "date_is_valid": true},
  ...
  {"date": "2019-02-01", "day": 2, "month":12, "year":2019, "price":"700", "date_is_valid": false}
]

I am aiming to render this data in HTML where each month has its own wrapper div:

<div *ngFor='let calendarDate of calendarDates'>
  <div class='month'>
    <div class='october'>
      <p>October</p>
      <div class='date'>{{calendarDate.date}} (2018-10-23)</div>
      <div class='date'>{{calendarDate.date}} (2018-10-24)</div>
      ...
    </div>
    <div class='november'>
      <p>November</p>
      <div class='date'>{{calendarDate.date}} (2018-11-01)</div>
      ...
    </div>
    <div class='february'>
      <p>February</p>
      <div class='date'>{{calendarDate.date}} (2019-02-01)</div>
      ...
    </div>
  </div>
</div>

I am struggling with filtering the data and organizing it by month in the HTML itself. How can I achieve this using ngIf directives while ensuring that changes in values like price or date validity are reflected dynamically?

angular typescript

Answer 1

Answer №1

To categorize items, you can create a custom pipe called GroupByPipe.

Group By Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
    transform(collection: Array, property: string): Array {
        if(!collection) {
            return null;
        }

        const groupedCollection = collection.reduce((previous, current)=> {
            if(!previous[current[property]]) {
                previous[current[property]] = [current];
            } else {
                previous[current[property]].push(current);
            }

            return previous;
        }, {});

        return Object.keys(groupedCollection).map(key => ({ key, value: groupedCollection[key] }));
    }
}

For more information on how to use this pipe, you can visit

HTML Example

<div *ngFor='let calendarDatesByMonth of calendarDates | groupBy:'month''>
  <div class='month'>
    <div class='october'>
      <p>{{getMonthName(calendarDatesByMonth.key)}}</p> <!-- calendarDatesByMonth.key is the month number -->
      <div *ngFor='let calendarDate of calendarDatesByMonth.value' class='date'>{{calendarDate.date}} (2018-10-23)</div>
    </div>
  </div>
</div>

Answer 2

To categorize items, you can create a custom pipe called GroupByPipe.

Group By Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
    transform(collection: Array, property: string): Array {
        if(!collection) {
            return null;
        }

        const groupedCollection = collection.reduce((previous, current)=> {
            if(!previous[current[property]]) {
                previous[current[property]] = [current];
            } else {
                previous[current[property]].push(current);
            }

            return previous;
        }, {});

        return Object.keys(groupedCollection).map(key => ({ key, value: groupedCollection[key] }));
    }
}

For more information on how to use this pipe, you can visit

HTML Example

<div *ngFor='let calendarDatesByMonth of calendarDates | groupBy:'month''>
  <div class='month'>
    <div class='october'>
      <p>{{getMonthName(calendarDatesByMonth.key)}}</p> <!-- calendarDatesByMonth.key is the month number -->
      <div *ngFor='let calendarDate of calendarDatesByMonth.value' class='date'>{{calendarDate.date}} (2018-10-23)</div>
    </div>
  </div>
</div>

Implementing ngFor to group values within div containers according to specific keys

Answer №1

Group By Pipe

HTML Example

Similar questions

RxJS: Understanding the issue of 'this' being undefined when used within the subscribe method

How to dynamically set options in Angular 4 by value

Encountering an issue with TypeScript after applying a wrapper to a Material-UI button - specifically, the error message states that the type '{ children: string; color: "light-green"; }' is lacking certain properties

What is the correct way to assign a property to a function's scope?

Create Open Graph meta tags dynamically using the MEAN stack, including Angular 2+

The initial function that gets executed in the lodash chain is tap()

Using Angular 6 pipes can simplify observable operations by eliminating the need for explicit typing

Adding an external component to an Angular 2 project

Access Select without needing to click on the child component

Button to expand or collapse all sections in Ant Design Collapse component

Google Chrome - Automatically scroll to the bottom of the list when new elements are added in *ngFor loop

Guide to utilizing vue-twemoji-picker in TypeScript programming?

The 'string[]' type cannot be assigned to the 'string | ParsedUrlQueryInput | null | undefined' type in Next.js and Typescript

A guide on incorporating Union Types in TypeScript

Angular throwing TypeError: Trying to access 'name' property of an undefined variable

What could be the cause of this malfunction in the Angular Service?

What is the best way to iterate through two object keys in TypeScript?

The server.js file is malfunctioning and unable to run

Incorporating an external TypeScript script into JavaScript

Mastering the Art of Flex Layout Grids