Angular can not change the date in the template

When you click on a button, the date in the header of the site should change to the next, in the console the date changes and in the template for some reason not = (

If I just change the string variable when I click, then everything is ok and the date is only in the console, I'm a newbie to help figure out

component

export class TopperComponent implements OnInit { topDate: any = new Date(); test: any; constructor() { } ngOnInit() { console.log(this.topDate); } nextTopDate(){ this.topDate.setDate(this.topDate.getDate() + 1); console.log(this.topDate); } } 

HTML code

 <div class="topper"> <div class="topper-btns"> <button type="button" class="main-menu" title="Меню"></button> <button type="button" class="prev-date" title="Предыдущая дата"></button> <button type="button" class="next-date" title="Следующая дата" (click)="nextTopDate()"></button> <button type="button" class="today-ico" title="Сегодня"><span>13</span></button> <button type="button" class="add-task" title="Добавить задачу"></button> </div> <div class="top-date" >{{topDate | topDatePipe }}</div> <div class="clear"></div> </div>