fix(calendar): should markForCheck when properties are changed (#15102)

* fix(calendar): should markForCheck when properties are changed

* fix test

src/lib/datepicker/calendar.spec.ts

@@ -188,17 +188,13 @@ describe('MatCalendar', () => {
         });
 
         it('should move focus to the active cell when the view changes', () => {
-          const activeCell =
-              calendarBodyEl.querySelector('.mat-calendar-body-active')! as HTMLElement;
-
-          spyOn(activeCell, 'focus').and.callThrough();
-          fixture.detectChanges();
-          zone.simulateZoneExit();
-
-          expect(activeCell.focus).not.toHaveBeenCalled();
-
           calendarInstance.currentView = 'multi-year';
           fixture.detectChanges();
+
+          const activeCell =
+              calendarBodyEl.querySelector('.mat-calendar-body-active')! as HTMLElement;
+          spyOn(activeCell, 'focus').and.callThrough();
+
           zone.simulateZoneExit();
 
           expect(activeCell.focus).toHaveBeenCalled();

src/lib/datepicker/calendar.ts

@@ -262,6 +262,7 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   set activeDate(value: D) {
     this._clampedActiveDate = this._dateAdapter.clampDate(value, this.minDate, this.maxDate);
     this.stateChanges.next();
+    this._changeDetectorRef.markForCheck();
   }
   private _clampedActiveDate: D;
 
@@ -270,6 +271,7 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   set currentView(value: MatCalendarView) {
     this._currentView = value;
     this._moveFocusOnNextTick = true;
+    this._changeDetectorRef.markForCheck();
   }
   private _currentView: MatCalendarView;