title: Angular Material Datepicker set min programmatically
body: <p>I am trying to set the min value of the second datepicker if i change the first datepicker, but i can't make it:</p>
  
  <p>I got these two datepicker</p>
  
  <pre><code>&lt;mat-form-field&gt;
          &lt;span *ngIf="item.type=='date' &amp;&amp; item.hijoDate"&gt;
              &lt;input matInput [id]="item.key" [matDatepicker]="picker"
              [min]="minDatePadre" [max]="maxDatePadre"
              (dateChange)="seleccionaFecha($event, 'padre', item.hijoDate)" 
              readonly [placeholder]="item.label" [formControlName]="item.key"&gt;
                &lt;mat-datepicker-toggle matSuffix [for]="picker"&gt;&lt;/mat-datepicker-toggle&gt;
                &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
              &lt;/span&gt;
              &lt;span *ngIf="item.type=='date' &amp;&amp; item.padreDate"&gt;
                &lt;input matInput [id]="item.key" [matDatepicker]="picker1"
                [min]="minDateHijo" [max]="maxDateHijo" 
                (dateChange)="seleccionaFecha($event, 'hijo', item.padreDate)"
                readonly [placeholder]="item.label" [formControlName]="item.key"&gt;
                &lt;mat-datepicker-toggle matSuffix [for]="picker1"&gt;&lt;/mat-datepicker-toggle&gt;
                &lt;mat-datepicker #picker1&gt;&lt;/mat-datepicker&gt;
              &lt;/span&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>In the component i have the following:</p>
  
  <pre><code>minDatePadre= new Date(2010, 1, 1);
  maxDatePadre= new Date(2020, 0, 1);
  minDateHijo= new Date(2010, 1, 1);
  maxDateHijo= new Date(2020, 0, 1);
  </code></pre>
  
  <p>I initialize the values, that works perfect and show the max and min in every datepicker, but when i try to change the values it's not working here:</p>
  
  <pre><code>seleccionaFecha(event, tipo, elemento){
  
  
      if(tipo == 'padre'){
        let fechaHijo = this.form.controls[elemento].value;
        let fechaPadre = event.value;
        if(fechaPadre&gt;fechaHijo){//SI LA FECHA INICIAL ES IGUAL 
          this.form.controls[elemento].setValue(fechaPadre);        
        }
  
        this.minDateHijo=new Date(2019, 1, 23);      
      }
      else if(tipo == 'hijo'){
        let fechaPadre = this.form.controls[elemento].value;
        let fechaHijo = event.value;
  
  
      }
  
  
    }
  </code></pre>
  
  <p>when it match the condition i change the value of </p>
  
  <pre><code>this.minDateHijo
  </code></pre>
  
  <p>but is not changing nothing and doesn't show any error, i don't know how to update that value, please any help, thank's</p>
  
  <p><strong>UPDATE: The behavior i can see is that the min value is updated, but the datepicker doesn't until i select some value in the child datepicker then it refreshes, i need to find a way to update the datepicker min value on the go.</strong></p>
  
  <p><strong>UPDATE:</strong> this is the stackblitz url with the example:</p>
  
  <p><a href="https://stackblitz.com/edit/angular-szjuq1" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-szjuq1</a> </p>
  
  <p>what i want is to choose first datepicker and then set the min date in the second datepicker, but when i choose the first datepicker it only updates him not the next, because i create it dynamically, thanks if you can tell me some way to do it.</p>