feat(datepicker): add viewChanged output to calendar (#13759) (#20468)

- replace deprecated async with waitForAsync

Author: fhuschle

src/material/datepicker/calendar-header.spec.ts

@@ -1,6 +1,10 @@
 import {Directionality} from '@angular/cdk/bidi';
 import {Component} from '@angular/core';
-import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
+import {
+  ComponentFixture,
+  TestBed,
+  waitForAsync
+} from '@angular/core/testing';
 import {MatNativeDateModule, DateAdapter} from '@angular/material/core';
 import {DEC, FEB, JAN} from '@angular/material/testing';
 import {By} from '@angular/platform-browser';
@@ -72,6 +76,44 @@ describe('MatCalendarHeader', () => {
       expect(calendarInstance.currentView).toBe('month');
     });
 
+    it('should emit viewChanged when view changed from \'month\' to \'multi-year\'',
+     () => {
+      expect(calendarInstance.currentView).toBe('month');
+      spyOn(calendarInstance.viewChanged, 'emit');
+
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.viewChanged.emit).toHaveBeenCalledWith('multi-year');
+    });
+
+    it('should emit viewChanged when view changed from \'multi-year\' to \'month\'',
+      () => {
+      periodButton.click();
+      fixture.detectChanges();
+      expect(calendarInstance.currentView).toBe('multi-year');
+      spyOn(calendarInstance.viewChanged, 'emit');
+
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.viewChanged.emit).toHaveBeenCalledWith('month');
+    });
+
+    it('should emit viewChanged when view changed from \'multi-year\' to \'year\'',
+    () => {
+      periodButton.click();
+      fixture.detectChanges();
+      expect(calendarInstance.currentView).toBe('multi-year');
+      spyOn(calendarInstance.viewChanged, 'emit');
+
+      (calendarElement.querySelector('.mat-calendar-body-active') as HTMLElement).click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.viewChanged.emit).toHaveBeenCalledWith('year');
+    });
+
+
     it('should go to next and previous month', () => {
       expect(calendarInstance.activeDate).toEqual(new Date(2017, JAN, 31));
 

src/material/datepicker/calendar.ts

@@ -268,6 +268,12 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
    */
   @Output() readonly monthSelected: EventEmitter<D> = new EventEmitter<D>();
 
+  /**
+   * Emits when the current view changes.
+   */
+  @Output() readonly viewChanged: EventEmitter<MatCalendarView> =
+    new EventEmitter<MatCalendarView>(true);
+
   /** Emits when any date is selected. */
   @Output() readonly _userSelection: EventEmitter<MatCalendarUserEvent<D | null>> =
       new EventEmitter<MatCalendarUserEvent<D | null>>();
@@ -296,9 +302,13 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   /** Whether the calendar is in month view. */
   get currentView(): MatCalendarView { return this._currentView; }
   set currentView(value: MatCalendarView) {
+    const viewChangedResult = this._currentView !== value ? value : null;
     this._currentView = value;
     this._moveFocusOnNextTick = true;
     this._changeDetectorRef.markForCheck();
+    if (viewChangedResult) {
+      this.viewChanged.emit(viewChangedResult);
+    }
   }
   private _currentView: MatCalendarView;
 

src/material/datepicker/datepicker-base.ts

@@ -50,7 +50,7 @@ import {
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 import {merge, Subject, Observable, Subscription} from 'rxjs';
 import {filter, take} from 'rxjs/operators';
-import {MatCalendar} from './calendar';
+import {MatCalendar, MatCalendarView} from './calendar';
 import {matDatepickerAnimations} from './datepicker-animations';
 import {createMissingDateImplError} from './datepicker-errors';
 import {MatCalendarUserEvent, MatCalendarCellClassFunction} from './calendar-body';
@@ -301,6 +301,12 @@ export abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S,
    */
   @Output() readonly monthSelected: EventEmitter<D> = new EventEmitter<D>();
 
+  /**
+   * Emits when the current view changes.
+   */
+  @Output() readonly viewChanged: EventEmitter<MatCalendarView> =
+    new EventEmitter<MatCalendarView>(true);
+
   /** Classes to be passed to the date picker panel. Supports the same syntax as `ngClass`. */
   @Input() panelClass: string | string[];
 
@@ -413,6 +419,11 @@ export abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S,
     this.monthSelected.emit(normalizedMonth);
   }
 
+  /** Emits changed view */
+  _viewChanged(view: MatCalendarView): void {
+    this.viewChanged.emit(view);
+  }
+
   /**
    * Register an input with this datepicker.
    * @param input The datepicker input to register with this datepicker.

src/material/datepicker/datepicker-content.html

@@ -14,5 +14,6 @@
     [@fadeInCalendar]="'enter'"
     (yearSelected)="datepicker._selectYear($event)"
     (monthSelected)="datepicker._selectMonth($event)"
+    (viewChanged)="datepicker._viewChanged($event)"
     (_userSelection)="_handleUserSelection($event)">
 </mat-calendar>

tools/public_api_guard/material/datepicker.d.ts

@@ -77,6 +77,7 @@ export declare class MatCalendar<D> implements AfterContentInit, AfterViewChecke
     set startAt(value: D | null);
     startView: MatCalendarView;
     stateChanges: Subject<void>;
+    readonly viewChanged: EventEmitter<MatCalendarView>;
     readonly yearSelected: EventEmitter<D>;
     yearView: MatYearView<D>;
     constructor(_intl: MatDatepickerIntl, _dateAdapter: DateAdapter<D>, _dateFormats: MatDateFormats, _changeDetectorRef: ChangeDetectorRef);
@@ -90,7 +91,7 @@ export declare class MatCalendar<D> implements AfterContentInit, AfterViewChecke
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     updateTodaysDate(): void;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatCalendar<any>, "mat-calendar", ["matCalendar"], { "headerComponent": "headerComponent"; "startAt": "startAt"; "startView": "startView"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; "comparisonStart": "comparisonStart"; "comparisonEnd": "comparisonEnd"; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "_userSelection": "_userSelection"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatCalendar<any>, "mat-calendar", ["matCalendar"], { "headerComponent": "headerComponent"; "startAt": "startAt"; "startView": "startView"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; "comparisonStart": "comparisonStart"; "comparisonEnd": "comparisonEnd"; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; }, never, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatCalendar<any>, [null, { optional: true; }, { optional: true; }, null]>;
 }