Incrementing date in angular template - html

Question

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.

Answer 1

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>