How to close calender when date is selected using Angular material Datepicker when using mat-datepicker-actions

Question

I'm using a normal Angular Material Datepicker (Angular 13), but I added some action buttons:

• one to clear the date
• one to set the date to 'infinity'
• the ok button (which I want to get rid of)

See my example: https://stackblitz.com/edit/angular-material-13-starter-x1xj4z-wzqxfv?file=src%2Fapp%2Fapp.component.html

The clear button and 'infinity' button work fine. Once clicked, the date is cleared or set and the popup closes. Perfect!

However, selecting a date works only by selecting the date and pressing the ok button.

What I want: Selecting the date closes immediately the popup while setting the date. Just like the behaviour there exists without mat-datepicker-actions.

Any one knows how I can achieve this?

Answer 1

This shouldn't be the answer, but it works:

@ViewChild(MatDatepicker) picker: MatDatepicker<any>;

ngAfterViewInit() {
    this.picker.openedStream.subscribe((event) => {
        setTimeout(() => {
            this.picker['_componentRef'].instance._calendar._userSelection.subscribe((event) => {
                console.log('Element selected')
            })
        },0)
    });
}