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

Tags: , ,

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 :

var minDateFinal ;
this.minDate = new Date();
minDateFinal = this.datePipe.transform(this.minDate,'yyyy-MM-dd') ;

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.


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:


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

Source: stackoverflow