fix(429): markForCheck when calling event handler

[ajafff]

IoService calls markForCheck on the on the host component's change detector before an event handler is called.
It's done before calling the event handler on purpose: this way the flag is reset the handler calls detectChanges and there's no additional change detection after the current tick. This also seems to be what Angular does in templates.

Note that I had difficulties understanding the tests. Therefore I duplicated a bit of code to make my tests work without affecting everything else.

Fixes: #429

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/gund/ng-dynamic-component/kf9ppyvme
✅ Preview: Failed

[Deployment for ef55884 failed]

[codecov]

Codecov Report

Merging #430 (ef55884) into master (d4e87ee) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master     #430   +/-   ##
=======================================
  Coverage   99.15%   99.15%           
=======================================
  Files          16       16           
  Lines         353      356    +3     
  Branches       60       60           
=======================================
+ Hits          350      353    +3     
  Misses          2        2           
  Partials        1        1           

Impacted Files	Coverage Δ
...dynamic-directives/dynamic-directives.directive.ts	97.72% <ø> (ø)
...dynamic-component/src/lib/io/io-factory.service.ts	100.00% <100.00%> (ø)
...ects/ng-dynamic-component/src/lib/io/io.service.ts	99.27% <100.00%> (+0.01%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d42111e...ef55884. Read the comment docs.

[gund]

Thanks for the PR! Great job with tests as well.
I have just one comment to address below.

[gund]

Instead of having CDR checks in 2 places you can move it into single place in the bindOutputs() method where the subscriptions are created:

ng-dynamic-component/projects/ng-dynamic-component/src/lib/io/io.service.ts

Line 195 in d42111e

.subscribe((event: any) => (outputs[p] as EventHandler)(event)),

Also you should first try to use dynamic component's CDR (available in compCdr prop) and if not available then fallback to it's own injected CDR.

ng-dynamic-component/projects/ng-dynamic-component/src/lib/io/io.service.ts

Lines 67 to 70 in d42111e

	private get compCdr(): ChangeDetectorRef {
	// tslint:disable-next-line: deprecation
	return this.compRef ? this.compRef.injector.get(ChangeDetectorRef) : null;
	}

[ajafff]

moved it to bindOutputs.

I tried using compCdr, but that didn't work. Always using the host's ChangeDetectorRef is also more correct, because the injected component does not need another change detection. Only the component that handles the event needs to be change detected again.

[gund]

Sounds logical, I just thought that marking the dynamic component itself should yield the same result as marking parent - because it's located under parent in the tree so it should become marked as every other parent component...
Don't quite understand why it does not mark parent component.
Maybe you know the reason?

[gund]

Thanks for changes - looks great!

[gund]

🎉 This PR is included in version 8.0.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀