DatePicker change the view in the custom header

Question

I'm using Angular Material's datePicker with a custom header and would like to add a button to my datepicker header allowing me to go to the "multi-year" view of the datepicker.

I tried to change the startView, but that only changes the view when I start the datepicker selection.

I find unfortunately no function allowing me to choose the view of the datepicker.

HTML:

<mat-form-field class="px-3">
  <input matInput [matDatepicker]="datePicker"
                  placeholder="Sélectionnez une période"
                  formControlName="selectedPeriod"
                  readonly
                  [min]="minDate" [max]="maxDate"
                  [matDatepickerFilter]="filterDate">
  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
  <mat-datepicker #datePicker touchUi
                  startView="multi-year"
                  (yearSelected)="chosenYearHandler($event)"
                  (monthSelected)="chosenMonthHandler($event, datePicker)"
                  [calendarHeaderComponent]="exampleHeader">
  </mat-datepicker>
</mat-form-field>

Header of the datepicker:

<div class="example-header">
 <button mat-icon-button class="example-double-arrow" 
         (click)="previousClicked()">
   <mat-icon>arrow_back</mat-icon>
 </button>
 <span class="example-header-label">{{periodLabel}}</span>
 <button mat-icon-button class="example-double-arrow" 
         (click)="closeClicked()">
   <mat-icon>close</mat-icon>
 </button>

export class ExampleHeader<Moment> implements OnDestroy {

 private destroyed = new Subject<void>();
 @ViewChildren('datePicker') datePicker: MatDatepicker<Moment>;

 constructor(@Host() private calendar: MatCalendar<Moment>,
          private dateAdapter: DateAdapter<Moment>,
          private datepicker: MatDatepicker<Moment>,
          @Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats,
          cdr: ChangeDetectorRef) {
              calendar.stateChanges
                  .pipe(takeUntil(this.destroyed))
                  .subscribe(() => cdr.markForCheck()); }

ngOnDestroy() {
  this.destroyed.next();
  this.destroyed.complete();
}

get periodLabel() {
  return this.dateAdapter
    .format(this.calendar.activeDate, this.dateFormats.display.monthYearA11yLabel)
    .toLocaleUpperCase();
}

//Back to the "multi-year" view of the datePicker
previousClicked() {
  this.datepicker.startView="multi-year"; //Does not match the demand
}

closeClicked() {
  this.datepicker.close();
}}

DEMO:

As in the demo, I would like a return to the previous view.

I did a StackBlitz HERE for my datePicker. (L.214)

Thank you in advance!

Answer 1

You need to change it to the following:

previousClicked() {
  this.calendar.currentView = 'multi-year';
}

See this stackblitz for a working example.