fix(multiple): move afterRender calls back outside zone

Updates some calls to afterRender / afterNextRender to explicitly run
outside the NgZone. These usages were originally explcitily run outside,
but the explicit call was removed when they were updated to use the
afterRender / afterNextRender function, since at the time it was
automatically outside the zone. The semantics of afterRender /
afterNextRendef have since changed so this is no longer true. Therefore
this PR restores the original explicit run outside.

src/cdk/overlay/overlay-ref.ts

@@ -7,24 +7,24 @@
  */
 
 import {Direction, Directionality} from '@angular/cdk/bidi';
+import {coerceArray, coerceCssPixelValue} from '@angular/cdk/coercion';
 import {ComponentPortal, Portal, PortalOutlet, TemplatePortal} from '@angular/cdk/portal';
+import {Location} from '@angular/common';
 import {
+ AfterRenderRef,
  ComponentRef,
  EmbeddedViewRef,
  EnvironmentInjector,
  NgZone,
  afterNextRender,
  afterRender,
  untracked,
- AfterRenderRef,
 } from '@angular/core';
-import {Location} from '@angular/common';
-import {Observable, Subject, merge, SubscriptionLike, Subscription} from 'rxjs';
+import {Observable, Subject, Subscription, SubscriptionLike, merge} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {OverlayKeyboardDispatcher} from './dispatchers/overlay-keyboard-dispatcher';
 import {OverlayOutsideClickDispatcher} from './dispatchers/overlay-outside-click-dispatcher';
 import {OverlayConfig} from './overlay-config';
-import {coerceCssPixelValue, coerceArray} from '@angular/cdk/coercion';
 import {PositionStrategy} from './position/position-strategy';
 import {ScrollStrategy} from './scroll';
 
@@ -495,10 +495,11 @@ export class OverlayRef implements PortalOutlet {
  // Run this outside the Angular zone because there's nothing that Angular cares about.
  // If it were to run inside the Angular zone, every test that used Overlay would have to be
  // either async or fakeAsync.
- this._backdropTimeout = this._ngZone.runOutsideAngular(() =>
- setTimeout(() => {
- this._disposeBackdrop(backdropToDetach);
- }, 500),
+ this._backdropTimeout = this._ngZone.runOutsideAngular(
+ () =>
+ setTimeout(() => {
+ this._disposeBackdrop(backdropToDetach);
+ }, 500) as any,
  );
  }
 

src/material/datepicker/calendar-body.ts

@@ -7,24 +7,24 @@
  */
 
 import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform';
+import {NgClass} from '@angular/common';
 import {
+ AfterViewChecked,
  ChangeDetectionStrategy,
  Component,
  ElementRef,
  EventEmitter,
+ Injector,
  Input,
- Output,
- ViewEncapsulation,
  NgZone,
  OnChanges,
- SimpleChanges,
  OnDestroy,
- AfterViewChecked,
- inject,
+ Output,
+ SimpleChanges,
+ ViewEncapsulation,
  afterNextRender,
- Injector,
+ inject,
 } from '@angular/core';
-import {NgClass} from '@angular/common';
 
 /** Extra CSS classes that can be associated with a calendar cell. */
 export type MatCalendarCellCssClasses = string | string[] | Set<string> | {[key: string]: any};
@@ -314,18 +314,20 @@ export class MatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterView
  _focusActiveCell(movePreview = true) {
  afterNextRender(
  () => {
- setTimeout(() => {
- const activeCell: HTMLElement | null = this._elementRef.nativeElement.querySelector(
- '.mat-calendar-body-active',
- );
-
- if (activeCell) {
- if (!movePreview) {
- this._skipNextFocus = true;
+ this._ngZone.runOutsideAngular(() => {
+ setTimeout(() => {
+ const activeCell: HTMLElement | null = this._elementRef.nativeElement.querySelector(
+ '.mat-calendar-body-active',
+ );
+
+ if (activeCell) {
+ if (!movePreview) {
+ this._skipNextFocus = true;
+ }
+
+ activeCell.focus();
  }
-
- activeCell.focus();
- }
+ });
  });
  },
  {injector: this._injector},