Angular Material Datepicker openStream and closeStream

Question

Regarding to the official docs of angular material the datepicker component provides two output's that get emit if the datepicker is opened (openedStream) or closed (closedStream) (datepicker-api).

If I open and close the datepicker I get nothing out of those eventsand my <div>{{ message }}</div> remains empty and shows no value.

My actual Setup

export class NoteCreateComponent {
  public message = "";
  
  constructor(){}
  
  toggleDatePicker(picker){
      picker.open();
  }
}

<div>{{ message }}</div>
<button (click)="toggleDatePicker(picker)" mat-icon-button>
<mat-datepicker 
    (openedStream)="message=$event"
    (closedStream)="message=$event" #picker>
</mat-datepicker>

Expected result would either I open or close the datepicker (not only by clicking a button) I get a feedback.

Answer 1

<mat-datepicker 
(opened)="streamOpened()" 
(closed)="streamClosed()" #picker> 
</mat-datepicker>

You should not use openedStream and closedStream event name because they are internal field names of DatePicker component. Use opened and closed. Look at MatDatePicker documetation:

@Output('closed') closedStream: EventEmitter<void>
@Output('opened') openedStream: EventEmitter<void>