Support OnPush change detection for class-specified components (to allow use of knobs)

[MaximSagan]

Issue: #6359

What I did

In AppComponent,

• I used the changed detector ref retrieved from the child component's injector (componentRef.injector.get(ChangeDetectorRef)), rather than the one available as a property on the component ref object (componentRef.changeDetectorRef), as the latter does not work.
• After the properties are updated, I mark the child component for checking (childChangeDetectorRef.markForCheck()), but I call change detection from the AppComponent itself (this.changeDetectorRef.detectChanges()) to ensure that any properties using @HostBinding are also updated.

How to test

• Is this testable with Jest or Chromatic screenshots?
  I don't think so, unless we there is an easy way to produce screenshots after knob interaction.
• Does this need a new example in the kitchen sink apps?
  Yes, included in this PR.
• Does this need an update to the documentation?
  No.

[kroeder]

Thanks for that PR! Looks like you need to update the snapshots in order to get the CI tests passing 🙂 The easiest way is to run yarn test and select Update all snapshots

I'll give it a review afterwards

[MaximSagan]

@kroeder

Thanks for that PR! Looks like you need to update the snapshots in order to get the CI tests passing 🙂 The easiest way is to run yarn test and select Update all snapshots

I'll give it a review afterwards

Sorry, missed that. Should be good now!

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://monorepo-git-fork-maximsagan-angular-suppo.storybook.now.sh

[kroeder]

LGTM

[electrovir]

I just spent hours trying to solve a problem similar to this and all I needed was your simple componentRef.injector.get(ChangeDetectorRef). Shame on Angular. Whatever, thank you so much!!