fix(core): When using setInput, mark view dirty in same was as `markF…

[atscott]

…orCheck`

ComponentRef.setInput internally calls markDirtyIfOnPush which only marks the given view as dirty but does not mark parents dirty like ChangeDetectorRef.markForCheck would.

angular/packages/core/src/render3/instructions/shared.ts

Lines 1018 to 1024 in f071224

	export function markDirtyIfOnPush(lView: LView, viewIndex: number): void {
	ngDevMode && assertLView(lView);
	const childComponentLView = getComponentLViewByIndex(viewIndex, lView);
	if (!(childComponentLView[FLAGS] & LViewFlags.CheckAlways)) {
	childComponentLView[FLAGS] |= LViewFlags.Dirty;
	}
	}

markDirtyIfOnPush has an assumption that it’s being called from the parent’s template. That is, we don’t need to mark dirty to the root, because we’ve already traversed down to it. The function used to only be called during template execution for input bindings but was added to setInput later. It's not a good fit because it means that if you are responding to events such as an emit from an Observable and call setInput, the view of your ComponentRef won't necessarily get checked when change detection runs next. If this lives inside some OnPush component tree that's not already dirty, it only gets refreshed if you also call ChangeDetectorRef.markForCheck in the host component (because it will be "shielded" be a non-dirty parent).

[pkozlowski-opensource]

Seems like a good direction, will need test + golden symbols update.
Ping me when it is ready for review - I'm curious what code we are going to pull and how it is going to impact size

[dylhunn]

This PR was merged into the repository by commit a4e749f.

[endoffline]

Hey,

thanks for fixing this issue in v16. As of now we've got this exact update problem in our application. setInput() isn't working exactly for the described reason.

As we are still a month away from the scheduled release of v16 and further away from upgrading our project to the newest version, I'd like to request to backport this fix to v15.1 and v15.2 respectively.

I've created an example using an overlay having a projected component into it. Inputs for the projected component are set via the ComponentRef using setInput(), which doesn't update the component properly if ChangeDetectionStrategy.OnPush is utilized on the parent component. The workaround for this is using markForCheck() after the inputs have been set, yet this shouldn't be necessary as setInput() should take care of that itself.

Example: Hover on the 'Hover me' text to see if the overlay component gets rendered properly and enable and disable markForCheck to activate the workaround.

Stackblitz example using v15.2.6 having buggy behavior:
https://stackblitz.com/edit/angular-p4pqib?file=src/main.ts

Stackblitz example using v16.0.0-next.7 validating this fix as being effective:
https://stackblitz.com/edit/angular-wcryrd?file=src/main.ts

Please backport this fix to v15.1 and 15.2. Thanks!

[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.}