Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom change detection with onPush is broken

See original GitHub issue

Issue Description

Related to Angular issues with ControlValueAccessor and OnPush components:

Currently, setting a component to use the OnPush change detection strategy is not safe with ngx-sub-form as you’d end up with a “shift”. If you type “Hello” in an input and then add “A” the displayed value would be “Hello”. If after that you add a B, the value displayed would be “HelloA”, etc. Late by 1 change basically.

When calling the onChange hook from the ControlValueAccessor, Angular should run a change detection but it seems that it’s not the case.


Not a beautiful one but at least simple and it’s still possible to use OnPush

In order to trigger a change detection, we can use the async pipe with a value coming from the form. So for every form that has at least a child (otherwise it’s not needed), you can do the following: []="formGroup.valueChanges | async".

For e.g., from a sub component:

<div [formGroup]="formGroup" []="formGroup.valueChanges | async">
  <-- ... -->

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:2
  • Comments:8

github_iconTop GitHub Comments

maxime1992commented, Dec 22, 2020

Alright after trying it previsouly then reverting the fix, I finally gave this another go today.

I’ve added OnPush for all the components in the demo app using the rewrite. This broke a few e2e tests so I had something to iterate with quickly.

I believe that by using markDirty it is now fixed. Here’s the commit:

All the e2e tests are passing correctly again

maxime1992commented, Sep 30, 2019

With Angular v9 around the corner and Ivy, we might be able to do all that without having to create a module and pass the ChangeDetectorRef 🙌.

We should be able to mark the component as dirty by passing the component’s reference (this) 🔥

So we should put that on hold as not having to setup a module is quite nice and if we can keep it that way we should probably

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular OnPush Change Detection - Avoid Common Pitfalls
In this post we are going to cover some typical pitfalls where OnPush is giving unexpected results and how to fix those situations,...
Read more >
Change Detection Strategy onpush not working - Stack Overflow
That's because detection is changed only when an input is changed in the OnPush components. You have to either detect changed manually:
Read more >
A Change Detection Strategy Revealing Mistakes in Your Code
In this article, we look into how the OnPush strategy affects Angular's change detection mechanism and which pitfalls we should avoid at all ......
Read more >
Avoid common pitfalls when using OnPush change detection ...
When the OnPush change detection is declared as we see above, the change detection doesn't run automatically anymore.
Read more >
Angular Performance: 5 OnPush Change Detection Case ...
As you may already know, OnPush change detection cannot be used out of the box. You have to consider the immutability of your...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found