Abrir mat-datepicker de Angular desde TypeScript

Tengo un select así :

 <mat-select placeholder="..." (change)="onChange($event.value)">
     <mat-option *ngFor="let option of options" [value]="option.value">
        {{ option }}
     </mat-option>
 </mat-select>
 <div class="disable">
    <mat-form-field>
       <input matInput [matDatepicker]="picker" placeholder="Choose a date">
       <mat-datepicker #picker ></mat-datepicker>
    </mat-form-field>
 </div>

deshabilitar la clase solo oculta el contenido del div.

En mi onChange($event) :

onChange(value) {
   if(value === 'someValue'){
       openDatePicker() //How to do this ??
   }
}

Si se selecciona un valor específico, me gustaría abrir el selector de fecha. ¿Es posible hacer esto desde TypeScript?

Gracias por tu respuesta

Respuesta #1

Necesitarás obtener el selector de fecha en tu código usando ViewChild así:

@ViewChild('picker') datePicker: MatDatepicker<Date>;

Luego, en tu función, puedes llamar al método open() del selector de fechas:

onChange(value) {
   if(value === 'someValue'){
       this.datePicker.open();
   }
}

Enlace a la demostración de StackBlitz.

Respuesta #2

crear objeto del selector de fecha usando ViewChild en TS como:

@ViewChild('picker') datePicker: MatDatepicker;

Usa el método predefinido open de MatDatepicker como:

onChange(value) {
   if(value === 'someValue'){
       this.datePicker.open();
   }
}