fix(cdk-experimental/column-resize): not working inside OnPush component (#19671)

Change detection wasn't triggered when attaching the resize handle inside an `OnPush` component which prevented some event listeners from being bound and broke the resizing completely.

Fixes #19670.

Author: crisbeto

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

@@ -15,6 +15,7 @@ import {
   OnDestroy,
   Type,
   ViewContainerRef,
+  ChangeDetectorRef,
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
 import {ComponentPortal, PortalInjector} from '@angular/cdk/portal';
@@ -61,6 +62,7 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   protected abstract readonly resizeNotifier: ColumnResizeNotifierSource;
   protected abstract readonly resizeStrategy: ResizeStrategy;
   protected abstract readonly viewContainerRef: ViewContainerRef;
+  protected abstract readonly changeDetectorRef: ChangeDetectorRef;
 
   /** The minimum width to allow the column to be sized to. */
   get minWidthPx(): number {
@@ -222,6 +224,9 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   private _showHandleOverlay(): void {
     this._updateOverlayHandleHeight();
     this.overlayRef!.attach(this._createHandlePortal());
+
+    // Needed to ensure that all of the lifecycle hooks inside the overlay run immediately.
+    this.changeDetectorRef.markForCheck();
   }
 
   private _updateOverlayHandleHeight() {

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

@@ -1,5 +1,12 @@
-import {Component, Directive, ElementRef, Type, ViewChild} from '@angular/core';
-import {ComponentFixture, TestBed, fakeAsync, /*flush,*/ inject} from '@angular/core/testing';
+import {
+  Component,
+  Directive,
+  ElementRef,
+  Type,
+  ViewChild,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+import {ComponentFixture, TestBed, fakeAsync, inject} from '@angular/core/testing';
 import {BidiModule} from '@angular/cdk/bidi';
 import {DataSource} from '@angular/cdk/collections';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing/private';
@@ -247,6 +254,9 @@ class MatResizeTest extends BaseTestComponent {
   @ViewChild(MatColumnResize, {static: true}) columnResize: AbstractMatColumnResize;
 }
 
+@Component({template: getTableTemplate(false), changeDetection: ChangeDetectionStrategy.OnPush})
+class MatResizeOnPushTest extends MatResizeTest {}
+
 @Component({template: getTableTemplate(true)})
 class MatResizeDefaultTest extends BaseTestComponent {
   @ViewChild(MatDefaultEnabledColumnResize, {static: true}) columnResize: AbstractMatColumnResize;
@@ -311,6 +321,7 @@ const approximateMatcher = {
 
 const testCases: ReadonlyArray<[Type<object>, Type<BaseTestComponent>, string]> = [
   [MatColumnResizeModule, MatResizeTest, 'opt-in table-based mat-table'],
+  [MatColumnResizeModule, MatResizeOnPushTest, 'inside OnPush component'],
   [MatColumnResizeModule, MatResizeFlexTest, 'opt-in flex-based mat-table'],
   [
     MatDefaultEnabledColumnResizeModule, MatResizeDefaultTest,

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

@@ -13,6 +13,7 @@ import {
   Injector,
   NgZone,
   ViewContainerRef,
+  ChangeDetectorRef,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {Directionality} from '@angular/cdk/bidi';
@@ -51,7 +52,8 @@ export class MatDefaultResizable extends AbstractMatResizable {
       protected readonly overlay: Overlay,
       protected readonly resizeNotifier: ColumnResizeNotifierSource,
       protected readonly resizeStrategy: ResizeStrategy,
-      protected readonly viewContainerRef: ViewContainerRef) {
+      protected readonly viewContainerRef: ViewContainerRef,
+      protected readonly changeDetectorRef: ChangeDetectorRef) {
     super();
     this.document = document;
   }

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

@@ -13,6 +13,7 @@ import {
   Injector,
   NgZone,
   ViewContainerRef,
+  ChangeDetectorRef,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {Directionality} from '@angular/cdk/bidi';
@@ -50,7 +51,8 @@ export class MatResizable extends AbstractMatResizable {
       protected readonly overlay: Overlay,
       protected readonly resizeNotifier: ColumnResizeNotifierSource,
       protected readonly resizeStrategy: ResizeStrategy,
-      protected readonly viewContainerRef: ViewContainerRef) {
+      protected readonly viewContainerRef: ViewContainerRef,
+      protected readonly changeDetectorRef: ChangeDetectorRef) {
     super();
     this.document = document;
   }