CODEWITHSUNDEEP
htmlangulardate
Nnnnn
Nnnnn

Reputation: 133

Incrementing date in angular template

I have something like below and i need to display dates incrementally

<ul>
  <li *ngFor="let item of items">
      <h2>
       {{item.name}}
      </h2>
      <p >
        {{item.description}}
      </p>
      <time>{{date | date:'dd/MM/yyyy'}}</time>
  </li>
</ul>

dates need to be shown as for first item it shows today's date and then tomorrow and so on. If there is a way that it can be done only by using html template then its better. Or just help with the best way to do this.

Upvotes: 0

Views: 720

Answers (1)

rhavelka
rhavelka

Reputation: 2386

I don't think there is a way to do this with only the date pipe, its primary use is morphing a current date into a different display. Not adding/removing. Something you could do is create your own date pipe that has an offset option

Solution 1

Creating a new pipe and using the moment library

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

@Pipe({name: 'customDate'})
export class CustomDatePipe implements PipeTransform {
  transform(date, format = 'dd/MM/yyyy', dayOffset = 0, monthOffset = 0, yearOffset = 0) {
    return moment(new Date(date)).add(dayOffset, 'days')
                                 .add(monthOffset, 'months')
                                 .add(yearOffset, 'years')
                                 .format(format);
  }
}

and then reference it in html as this

<ul>
  <li *ngFor="let item of items; let i = index">
      <span>{{date | customDate: 'dd/MM/yyyy': i}}</span>
  </li>
</ul>

Solution 2

Or you can use vanilla javascript Date along with a custom pipe

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

@Pipe({name: 'customDate'})
export class CustomDatePipe implements PipeTransform {
  transform(date, format = 'dd/MM/yyyy', dayOffset = 0) {
    return new Date(date).addDays(dayOffset);
  }
}

and reference it like this

<ul>
  <li *ngFor="let item of items; let i = index">
      <span>{{date | customDate: i | date: 'dd/MM/yyyy'}}</span>
  </li>
</ul>

Upvotes: 1

Related Questions