CODEWITHSUNDEEP
angular
LisaParker
LisaParker

Reputation: 21

Condtion ngIf on date

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

Answers (3)

Toshkata Tonev
Toshkata Tonev

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

Daniel Segura P&#233;rez
Daniel Segura P&#233;rez

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

Kris
Kris

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

Related Questions