column-resize (experimental) does not work with ChangeDetectionStrategy.OnPush

[grant77]

Reproduction

1. Grab demo from here: https://github.com/angular/components/blob/master/src/components-examples/material-experimental/column-resize/default-enabled/
2. Add "changeDetection: ChangeDetectionStrategy.OnPush" to default-enabled-column-resize-demo.ts
3. Try to resize columns

Expected Behavior

Columns should resize.

Actual Behavior

Columns do not resize.

Environment

"@angular/material-experimental": "^9.2.4"

[grant77]

It appears as though ResizeOverlayHandle.ngAfterViewInit is not getting called. I came up with a very crappy workaround, but it works:

(Resizable.prototype as any)._createHandlePortal = new Proxy((Resizable.prototype as any)._createHandlePortal, {
  apply(target: any, thisArg: any, argArray: any) {
    const result = Reflect.apply(target, thisArg, argArray) as ComponentPortal<any>;
    const cdr = result.injector?.get(ChangeDetectorRef);
    if (cdr) {
      Promise.resolve().then(() => cdr.markForCheck()); // <== Call ngAfterViewInit
    }
    return result;
  }
});

[grant77]

Wow, that was quick!
Thanks, guys.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}