Arranging List Based on Date

Question

Arranging List Based on Date

I am looking to create a list that is grouped by date, similar to the image below. However, I am unsure how to implement this feature.

https://i.sstatic.net/7vjz0.png

You can see my code example and demo on Stackblitz

app.component.html

<div *ngFor="let monthData of products">
<div class="upcoming-container">
      <div class="upcoming-container-title-section color">
        Group Month | {{monthData.date | date : 'MMMM yyyy' }}
      </div>
      <div class="upcoming-container-card-section">
        <div *ngFor="let card of products" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6 upcoming-container-card-item">
            <app-card [listData]="listData"></app-card>
        </div>
      </div>
    </div>
</div>

card.component.ts

 _listData: listData;

  @Input()
  set listData(data: listData) {
    this._listData = data;
  }
  get listData() {
    return this._listData;
  }

  constructor() { }
}

card.component.html

<div class="cards-list">

<div class="card 1">
  <div class="card_image"> <img src="https://i.redd.it/b3esnz5ra34y.jpg" /> </div>
  <div class="card_title title-white">
    <p>{{listData.date | date: 'd MMM yyyy'}}</p>
  </div>
</div>

</div>

angular typescript

Answer 1

Answer №1

Regrettably, the *ngFor directive does not include a built-in group by feature. You will need to adjust your approach in order to achieve this functionality.

In your component.html:

<div *ngFor="let monthData of resultData">
<div class="upcoming-container">
      <div class="upcoming-container-title-section color">
        Group Month | {{monthData.date | date : 'MMMM yyyy' }}
      </div>
      <div class="upcoming-container-card-section">
        <div  *ngFor="let card of monthData.products" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6 upcoming-container-card-item">
            <app-card [listData]="card"></app-card>
        </div>
      </div>
    </div>
</div>

In component.ts:

let data = new Set(this.products.map(item => item.date))
data.forEach((date)=>{
     this.resultData.push({
        date: date, 
        products: this.products.filter(i => i.date === date)
      })
})

Check out the live example here: demo

Answer 2

Regrettably, the *ngFor directive does not include a built-in group by feature. You will need to adjust your approach in order to achieve this functionality.

In your component.html:

<div *ngFor="let monthData of resultData">
<div class="upcoming-container">
      <div class="upcoming-container-title-section color">
        Group Month | {{monthData.date | date : 'MMMM yyyy' }}
      </div>
      <div class="upcoming-container-card-section">
        <div  *ngFor="let card of monthData.products" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-6 upcoming-container-card-item">
            <app-card [listData]="card"></app-card>
        </div>
      </div>
    </div>
</div>

In component.ts:

let data = new Set(this.products.map(item => item.date))
data.forEach((date)=>{
     this.resultData.push({
        date: date, 
        products: this.products.filter(i => i.date === date)
      })
})

Check out the live example here: demo

Arranging List Based on Date

Answer №1

Similar questions

How to update nested properties in Typescript using bracket notation

Issue encountered while utilizing combineReducers: "Error: The assetsReducer returned an undefined value during initialization."

When debugging in Visual Studio 2013, Typescript variables/fields consistently show up as undefined

Passing a Typescript object as a parameter in a function call

Yes, indeed - Entering the schema of a retrieved field from an Object schema

Unit testing Jest for TypeScript files within a module or namespace

I am unsure why it is displaying these errors

Step by step guide on integrating current locations in Leaflet OpenStreetMap within an Angular application

Linting error: Unable to access properties of an undefined object (isStrict)

Enhance user experience with Angular Material and TypeScript by implementing an auto-complete feature that allows

How can we incorporate methods using TypeScript?

When executed, the Node application successfully compiles

Using Node.js with Typescript and RedisJSON allows for a powerful and efficient

Ways to activate a click event using typescript

Changing the color of the pre-selected date in the mat-datepicker Angular component is a key feature that can enhance the

Error encountered when using withRouter together with withStyles in Typescript on ComponentName

Tips for fixing the HTTP error 431 in Next.js with Next-Auth

Tips for creating a tailored Express.js request interface using Typescript efficiently

Using RxJs to apply a `filter` to an Array of Observable<T>, and emitting the value as soon as it meets a certain condition

redux-toolkit extraReducers not triggering