fix(cdk/table): resolve breaking constructor changes (#20425)

In #19964 and #19750 some breaking constructor changes were made which eventually got released as a part of a patch branch which doesn't follow our breaking changes policy.

These changes make the new constructor parameters optional and add fallbacks to the old behavior.

Fixes #20422.

Author: crisbeto

src/cdk-experimental/column-resize/resize-strategy.ts

@@ -9,7 +9,7 @@
 import {Inject, Injectable, OnDestroy, Provider} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {coerceCssPixelValue} from '@angular/cdk/coercion';
-import {CdkTable, _CoalescedStyleScheduler} from '@angular/cdk/table';
+import {CdkTable, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER} from '@angular/cdk/table';
 
 import {ColumnResize} from './column-resize';
 
@@ -76,7 +76,8 @@ export abstract class ResizeStrategy {
 export class TableLayoutFixedResizeStrategy extends ResizeStrategy {
   constructor(
       protected readonly columnResize: ColumnResize,
-      protected readonly styleScheduler: _CoalescedStyleScheduler,
+      @Inject(_COALESCED_STYLE_SCHEDULER)
+          protected readonly styleScheduler: _CoalescedStyleScheduler,
       protected readonly table: CdkTable<unknown>) {
     super();
   }
@@ -131,7 +132,8 @@ export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDest
 
   constructor(
       protected readonly columnResize: ColumnResize,
-      protected readonly styleScheduler: _CoalescedStyleScheduler,
+      @Inject(_COALESCED_STYLE_SCHEDULER)
+          protected readonly styleScheduler: _CoalescedStyleScheduler,
       protected readonly table: CdkTable<unknown>,
       @Inject(DOCUMENT) document: any) {
     super();

src/cdk/table/coalesced-style-scheduler.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, NgZone, OnDestroy} from '@angular/core';
+import {Injectable, NgZone, OnDestroy, InjectionToken} from '@angular/core';
 import {from, Subject} from 'rxjs';
 import {take, takeUntil} from 'rxjs/operators';
 
@@ -18,6 +18,10 @@ export class _Schedule {
   endTasks: (() => unknown)[] = [];
 }
 
+/** Injection token used to provide a coalesced style scheduler. */
+export const _COALESCED_STYLE_SCHEDULER =
+    new InjectionToken<_CoalescedStyleScheduler>('_COALESCED_STYLE_SCHEDULER');
+
 /**
  * Allows grouping up CSSDom mutations after the current execution context.
  * This can significantly improve performance when separate consecutive functions are

src/cdk/table/sticky-styler.ts

@@ -42,7 +42,11 @@ export class StickyStyler {
   constructor(private _isNativeHtmlTable: boolean,
               private _stickCellCss: string,
               public direction: Direction,
-              private _coalescedStyleScheduler: _CoalescedStyleScheduler,
+              /**
+               * @deprecated `_coalescedStyleScheduler` parameter to become required.
+               * @breaking-change 11.0.0
+               */
+              private _coalescedStyleScheduler?: _CoalescedStyleScheduler,
               private _isBrowser = true,
               private readonly _needsPositionStickyOnElement = true) { }
 
@@ -68,7 +72,7 @@ export class StickyStyler {
     }
 
     // Coalesce with sticky row/column updates (and potentially other changes like column resize).
-    this._coalescedStyleScheduler.schedule(() => {
+    this._scheduleStyleChanges(() => {
       for (const element of elementsToClear) {
         this._removeStickyStyle(element, stickyDirections);
       }
@@ -99,7 +103,7 @@ export class StickyStyler {
     const endPositions = this._getStickyEndColumnPositions(cellWidths, stickyEndStates);
 
     // Coalesce with sticky row updates (and potentially other changes like column resize).
-    this._coalescedStyleScheduler.schedule(() => {
+    this._scheduleStyleChanges(() => {
       const isRtl = this.direction === 'rtl';
       const start = isRtl ? 'right' : 'left';
       const end = isRtl ? 'left' : 'right';
@@ -163,7 +167,7 @@ export class StickyStyler {
 
     // Coalesce with other sticky row updates (top/bottom), sticky columns updates
     // (and potentially other changes like column resize).
-    this._coalescedStyleScheduler.schedule(() => {
+    this._scheduleStyleChanges(() => {
       for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
         if (!states[rowIndex]) {
           continue;
@@ -191,7 +195,7 @@ export class StickyStyler {
     const tfoot = tableElement.querySelector('tfoot')!;
 
     // Coalesce with other sticky updates (and potentially other changes like column resize).
-    this._coalescedStyleScheduler.schedule(() => {
+    this._scheduleStyleChanges(() => {
       if (stickyStates.some(state => !state)) {
         this._removeStickyStyle(tfoot, ['bottom']);
       } else {
@@ -323,4 +327,17 @@ export class StickyStyler {
 
     return positions;
   }
+
+  /**
+   * Schedules styles to be applied when the style scheduler deems appropriate.
+   * @breaking-change 11.0.0 This method can be removed in favor of calling
+   * `CoalescedStyleScheduler.schedule` directly once the scheduler is a required parameter.
+   */
+  private _scheduleStyleChanges(changes: () => void) {
+    if (this._coalescedStyleScheduler) {
+      this._coalescedStyleScheduler.schedule(changes);
+    } else {
+      changes();
+    }
+  }
 }

src/cdk/table/table.ts

@@ -57,7 +57,7 @@ import {
 } from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {CdkColumnDef} from './cell';
-import {_CoalescedStyleScheduler} from './coalesced-style-scheduler';
+import {_CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER} from './coalesced-style-scheduler';
 import {
   BaseRowDef,
   CdkCellOutlet,
@@ -199,7 +199,7 @@ export interface RenderRow<T> {
   providers: [
     {provide: CDK_TABLE, useExisting: CdkTable},
     {provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy},
-    _CoalescedStyleScheduler,
+    {provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler},
   ]
 })
 export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
@@ -443,14 +443,19 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
   constructor(
       protected readonly _differs: IterableDiffers,
       protected readonly _changeDetectorRef: ChangeDetectorRef,
-      protected readonly _coalescedStyleScheduler: _CoalescedStyleScheduler,
       protected readonly _elementRef: ElementRef, @Attribute('role') role: string,
       @Optional() protected readonly _dir: Directionality, @Inject(DOCUMENT) _document: any,
       private _platform: Platform,
-      // Optional for backwards compatibility, but a view repeater strategy will always
-      // be provided.
+
+      /**
+       * @deprecated `_coalescedStyleScheduler`, `_viewRepeater` and `_viewportRuler`
+       *    parameters to become required.
+       * @breaking-change 11.0.0
+       */
       @Optional() @Inject(_VIEW_REPEATER_STRATEGY)
-      protected readonly _viewRepeater: _ViewRepeater<T, RenderRow<T>, RowContext<T>>) {
+        protected readonly _viewRepeater?: _ViewRepeater<T, RenderRow<T>, RowContext<T>>,
+      @Optional() @Inject(_COALESCED_STYLE_SCHEDULER)
+        protected readonly _coalescedStyleScheduler?: _CoalescedStyleScheduler) {
     if (!role) {
       this._elementRef.nativeElement.setAttribute('role', 'grid');
     }
@@ -549,11 +554,14 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
       return;
     }
     const viewContainer = this._rowOutlet.viewContainer;
-    this._viewRepeater.applyChanges(
+
+    // @breaking-change 11.0.0 Remove null check for `_viewRepeater`
+    // once it's a required parameter in the constructor.
+    this._viewRepeater?.applyChanges(
         changes,
         viewContainer,
         (record: IterableChangeRecord<RenderRow<T>>,
-         adjustedPreviousIndex: number|null,
+         _adjustedPreviousIndex: number|null,
          currentIndex: number|null) => this._getEmbeddedViewArgs(record.item, currentIndex!),
         (record) => record.item.data,
         (change: _ViewRepeaterItemChange<RenderRow<T>, RowContext<T>>) => {

src/material-experimental/column-resize/overlay-handle.ts

@@ -15,7 +15,11 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
-import {CdkColumnDef, _CoalescedStyleScheduler} from '@angular/cdk/table';
+import {
+  CdkColumnDef,
+  _CoalescedStyleScheduler,
+  _COALESCED_STYLE_SCHEDULER,
+} from '@angular/cdk/table';
 import {Directionality} from '@angular/cdk/bidi';
 import {
   ColumnResize,
@@ -49,7 +53,8 @@ export class MatColumnResizeOverlayHandle extends ResizeOverlayHandle {
       protected readonly ngZone: NgZone,
       protected readonly resizeNotifier: ColumnResizeNotifierSource,
       protected readonly resizeRef: ResizeRef,
-      protected readonly styleScheduler: _CoalescedStyleScheduler,
+      @Inject(_COALESCED_STYLE_SCHEDULER)
+          protected readonly styleScheduler: _CoalescedStyleScheduler,
       @Inject(DOCUMENT) document: any) {
     super();
     this.document = document;

src/material-experimental/column-resize/resizable-directives/default-enabled-resizable.ts

@@ -18,7 +18,11 @@ import {
 import {DOCUMENT} from '@angular/common';
 import {Directionality} from '@angular/cdk/bidi';
 import {Overlay} from '@angular/cdk/overlay';
-import {CdkColumnDef, _CoalescedStyleScheduler} from '@angular/cdk/table';
+import {
+  CdkColumnDef,
+  _CoalescedStyleScheduler,
+  _COALESCED_STYLE_SCHEDULER,
+} from '@angular/cdk/table';
 import {
   ColumnResize,
   ColumnResizeNotifierSource,
@@ -52,7 +56,8 @@ export class MatDefaultResizable extends AbstractMatResizable {
       protected readonly overlay: Overlay,
       protected readonly resizeNotifier: ColumnResizeNotifierSource,
       protected readonly resizeStrategy: ResizeStrategy,
-      protected readonly styleScheduler: _CoalescedStyleScheduler,
+      @Inject(_COALESCED_STYLE_SCHEDULER)
+          protected readonly styleScheduler: _CoalescedStyleScheduler,
       protected readonly viewContainerRef: ViewContainerRef,
       protected readonly changeDetectorRef: ChangeDetectorRef) {
     super();

src/material-experimental/column-resize/resizable-directives/resizable.ts

@@ -18,7 +18,11 @@ import {
 import {DOCUMENT} from '@angular/common';
 import {Directionality} from '@angular/cdk/bidi';
 import {Overlay} from '@angular/cdk/overlay';
-import {CdkColumnDef, _CoalescedStyleScheduler} from '@angular/cdk/table';
+import {
+  CdkColumnDef,
+  _CoalescedStyleScheduler,
+  _COALESCED_STYLE_SCHEDULER,
+} from '@angular/cdk/table';
 import {
   ColumnResize,
   ColumnResizeNotifierSource,
@@ -51,7 +55,8 @@ export class MatResizable extends AbstractMatResizable {
       protected readonly overlay: Overlay,
       protected readonly resizeNotifier: ColumnResizeNotifierSource,
       protected readonly resizeStrategy: ResizeStrategy,
-      protected readonly styleScheduler: _CoalescedStyleScheduler,
+      @Inject(_COALESCED_STYLE_SCHEDULER)
+          protected readonly styleScheduler: _CoalescedStyleScheduler,
       protected readonly viewContainerRef: ViewContainerRef,
       protected readonly changeDetectorRef: ChangeDetectorRef) {
     super();

src/material-experimental/column-resize/resize-strategy.ts

@@ -8,7 +8,7 @@
 
 import {Inject, Injectable, Provider} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
-import {CdkTable, _CoalescedStyleScheduler} from '@angular/cdk/table';
+import {CdkTable, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER} from '@angular/cdk/table';
 
 import {
   ColumnResize,
@@ -26,7 +26,7 @@ export {TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER};
 export class MatFlexTableResizeStrategy extends CdkFlexTableResizeStrategy {
   constructor(
       columnResize: ColumnResize,
-      styleScheduler: _CoalescedStyleScheduler,
+      @Inject(_COALESCED_STYLE_SCHEDULER) styleScheduler: _CoalescedStyleScheduler,
       table: CdkTable<unknown>,
       @Inject(DOCUMENT) document: any) {
     super(columnResize, styleScheduler, table, document);

src/material-experimental/mdc-table/table.ts

@@ -7,7 +7,12 @@
  */
 
 import {ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation} from '@angular/core';
-import {CDK_TABLE_TEMPLATE, CdkTable, _CoalescedStyleScheduler} from '@angular/cdk/table';
+import {
+  CDK_TABLE_TEMPLATE,
+  CdkTable,
+  _CoalescedStyleScheduler,
+  _COALESCED_STYLE_SCHEDULER,
+} from '@angular/cdk/table';
 import {_DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY} from '@angular/cdk/collections';
 
 @Component({
@@ -20,7 +25,7 @@ import {_DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY} from '@angular/cd
   },
   providers: [
     {provide: CdkTable, useExisting: MatTable},
-    _CoalescedStyleScheduler,
+    {provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler},
     // TODO(michaeljamesparsons) Abstract the view repeater strategy to a directive API so this code
     //  is only included in the build if used.
     {provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy},

src/material/table/table.ts

@@ -10,7 +10,7 @@ import {
   CDK_TABLE_TEMPLATE,
   CdkTable,
   CDK_TABLE,
-  _CoalescedStyleScheduler
+  _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER
 } from '@angular/cdk/table';
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 import {_DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY} from '@angular/cdk/collections';
@@ -32,7 +32,7 @@ import {_DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY} from '@angular/cd
     {provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy},
     {provide: CdkTable, useExisting: MatTable},
     {provide: CDK_TABLE, useExisting: MatTable},
-    _CoalescedStyleScheduler,
+    {provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler},
   ],
   encapsulation: ViewEncapsulation.None,
   // See note on CdkTable for explanation on why this uses the default change detection strategy.