mat-datepicker as cell editor for ag-grid popup turns up blank

Question

I've had a material datepicker as a cell editor for ag-grid and it worked before I upgraded to angular 9 - now the datepicker pops up but the popup is blank. I have datepickers on the same page in other areas that work fine outside of ag-grid:

Here is my cell editor:

import { Component, AfterViewInit, ViewChild } from '@angular/core'
import { MatDatepicker } from '@angular/material/datepicker'

@Component({
  selector: 'multiselect-date-renderer',
  styleUrls: ['./cell-text.component.scss'],
  template: `
    <input #input matInput [(ngModel)]="value" [matDatepicker]="picker" />
    <mat-datepicker #picker></mat-datepicker>
  `
})

export class CellDateComponent implements AfterViewInit {
  @ViewChild('input') textInput
  @ViewChild('picker') datePicker: MatDatepicker<Date>

  params
  value: any

  constructor() {
  }

  ngAfterViewInit() {
    this.datePicker.open()
  }

  agInit(params: any): void {
    this.params = params
    this.value = this.params.value ? new Date(this.params.value) : new Date()
  }

  getValue() {
    return this.textInput.value
  }

}

Answer 1

There seems to be some problem with datepicker and AOT build, i could not get it working, i have a slightly different component configuration in my project (i have a wrapper component with click binding which in turn open datepicker), So following is a mere suggestion to try!

...
  @ViewChild('picker', { read: ElementRef, static: true }) datePickerElRef!: ElementRef<HTMLElement>;
...
  ngAfterViewInit(): void {
    this.elRef.nativeElement.click();
  }
...