problem with the biding between the ts file and the html file with the property [min]. Angular 7

Im using Angular Cli 7.3.9

I have a date type input that should display, in its datepicker, from the next day according to the current date.

here’s what I did on my .ts :

debugger
var minDateFinal ;
this.minDate = new Date();
this.minDate.setDate(this.minDate.getDate()+1)
minDateFinal = this.datePipe.transform(this.minDate,'yyyy-MM-dd') ;
console.log(minDateFinal);
debugger

here’s what I did on my .Html:

<input type="date" class="form-control" formControlName="dateDebut" [min]="minDateFinal">

The problem when I consult the console I get the right result but the display does not work. here are the screenshots to understand my problem :

when I override the property min with this code:

<input type="date" class="form-control" formControlName="dateDebut" min="2020-10-02">

I get : What i want

but when I use what I’ve done it doesn’t work.

I get : What i get

thank you in advance.

Answer

That is because when you do your date initialization in the ts file, your view (html) isn’t yet ready, you will have to use ngAfterViewInit(), so in your ts file:

minDateFinal;
minDate;

ngAfterViewInit() {
  this.minDate = new Date();
  this.minDate.setDate(this.minDate.getDate()+1)
  this.minDateFinal = this.datePipe.transform(this.minDate,'yyyy-MM-dd') ;
}