One way data binding not working when using date pipe - date

Question

I'm using a date object to keep track of the current date in an application.
In my view I have a one way binding like this:
<h3>{{ currentDate | date }}</h3>
And in the component, I have functions to change this date, like this:
previousMonth(){
this.currentDate.setMonth(this.currentDate.getMonth() - 1);
}
nextMonth(){
this.currentDate.setMonth(this.currentDate.getMonth() + 1);
}
But when these functions are triggered, the currentDate value doesn't update on the view.
I made sure the date object is being updated, just not on the view.
Whenever I remove the date pipe, it works.
Anyone has any idea how to fix this?
Thanks!

Answer 1

The value is not updating in the view because the pipes in angular are so called pure (or, stateless) by default. That means that the input will not be re-evaluated if the input object changes, but only if it's replaced.
From the documentation (see section Pure and Impure pipes):
Angular executes a pure pipe only when it detects a pure change to the
input value. A pure change is either a change to a primitive input
value (String, Number, Boolean, Symbol) or a changed object reference
(Date, Array, Function, Object).
Try the following code instead:
previousMonth(){
this.currentDate.setMonth(this.currentDate.getMonth() - 1);
this.currentDate = new Date(this.currentDate);
}
nextMonth(){
this.currentDate.setMonth(this.currentDate.getMonth() + 1);
this.currentDate = new Date(this.currentDate);
}