Cannot open material datapicker using ngAfterViewInit by element id

0
votes

I'm trying to open material DatePicker when component loaded using element id (#). When I try use ngAfterViewInit it always return 'cannot use 'open' to undefined'. It works when I click calendar icon or even add click property to a button with open() function.

I created simple stackblitz page here https://stackblitz.com/edit/angular-7dkbsw?file=src%2Fapp%2Fapp.component.html when you can check what I want to acheive.

picker ID is defined as a material element that should open modal with calendar.

1
angularangular-material

1 Answers

2
votes

You set the wrong type to picker,it should be MatDatepicker not a ElementRef

export class AppComponent  {
  @ViewChild('picker',{static:false}) picker: MatDatepicker;

  ngAfterViewInit(){
    this.picker.open();
  }
}