Reputation: 21
I have a div that i want to append an ngIf condition on date.
At the moment i'm displaying all the dates like this:
<div class="user" *ngFor="let user of user">
<div *ngIf="user.recipient === selectedUser._id && showUser(User)">
<div *ngIf="shouldDisplayDate(user.date)">
<div class="message-date">{{ user.date | date:'EEEE'}} {{user.date | date:'d'}} {{ user.date | date:'MMMM'}} {{ user.date |
date:'yyyy'}}
</div>
</div>
As Example :
["Mon Jul 16 2018 11:40:28 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:33:46 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:21:36 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:03:42 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:01:05 GMT+0200 (CEST)",
"Fri Jul 13 2018 08:53:23 GMT+0200 (CEST)",
"Fri Jul 13 2018 08:52:33 GMT+0200 (CEST)",
"Thu Jul 12 2018 13:41:59 GMT+0200 (CEST)",
"Thu Jul 12 2018 13:41:49 GMT+0200 (CEST)",
"Thu Jul 12 2018 13:41:42 GMT+0200 (CEST)"]
I have 6 Times Fri 13 Jul + 3 Times Thu 12 July and one time Mon 16 Jul
I want to only display the first one of every date and not all of them
"Thu Jul 12 2018 13:41:59 GMT+0200 (CEST)"
"Mon Jul 16 2018 11:40:28 GMT+0200 (CEST)",
"Fri Jul 13 2018 09:33:46 GMT+0200 (CEST)"
the ts
messageRed(date: Date) {
const users = this.messages.map(a => a.date);
for (const dateString of users) {
if (!this.datesFiltered.find(d => new Date(d).setHours(0, 0, 0) == new Date(dateString).setHours(0, 0, 0))) {
this.datesFiltered.push(new Date(dateString))
console.log(this.datesFiltered) // this will display the filtred data
}
}
}
Is there a way to do an ngIf on date ?
Upvotes: 0
Views: 2892
Reputation: 1501
I will rather to push all the unique dates somehwere else. To Implement a logic to filter and get the unique dates on user selection change or elsewhere your component change it's user state. Something like that:
//Clear the uniqueDate collection first
this.uniqueDates=[];
// Get all the filtered user dates
const dates = users.filter(user => user.recipient === this.selectedUser._id && this.showUser(User))
.map(uniqueDates=> filteredUsers.date);
const uniqueKeys: { [name: string]: any; } = {};
// Unique dates
dates.forEach((element) => {
const uniquieKey = element.getDate() + element.getMonth() + element.getFullYear();
if (!uniqueKeys[uniquieKey]) {
uniqueKeys[uniquieKey] = element;
this.uniqueDates.push(element);
}
});
}
}
This will remove the if conditions in the template and make it more readable.
<div class="user" *ngFor="let date of uniqueDates">
<div class="message-date">{{ date | date:'EEEE'}} {{date | date:'d'}} {{ date | date:'MMMM'}} {{ date |
date:'yyyy'}}
</div>
</div>
Upvotes: 1
Reputation: 1117
I work on first version of want you want:
https://angular-pyzt3g.stackblitz.io
I filter data by unique values(year-month-day), the rest is filter the uniques with the last date of unique year-month-day.
cheers!
Upvotes: 1
Reputation: 41877
You could put something like this in the code of your component:
lastDate: Date = null;
shouldDisplayDate(date: Date) : boolean {
if (date != this.lastDate) {
this.lastDate = date;
return true;
}
return false;
}
and then in the template:
<div *ngIf="shouldDisplayDate(user.date)">
<div class="user-date">{{ user.date | date:'EEEE'}} {{user.date | date:'d'}} {{ user.date | date:'MMMM'}} {{ user.date |date:'yyyy'}}</div>
</div>
The result should be what you want, if I understood correctly.
Upvotes: 0