changedetection onPush for Angular Component

Question

I have no experience with the Angular changeDetection. Now i want to change it from default to onPush. Maybe somebody can help me with my code.

I have a mat-table and a mongodb datasource. As soon as i change the changedetection, when I edit my data in my application, Angular is not triggered anymore, to update the data automatically. I don't know how i can trigger Angular to do so.

Thanks in Advance.

Answer 1

Rather than answering on your code, let me answer on the principles.

Angular triggers change detection a lot of time when the default strategy is used. But when you use onPush strategy, only a few handful of actions trigger it. This includes (not exhaustive)

• Async pipe
• Using the change detector ref
• Inputs / Outputs
• Users actions (click, focus)

Using subjects and behavior subjects is a good way of increasing the performances of your application when using onPush strategy, with minimal changes required.

But it implies that you do it properly.

The most common mistake is memory reference assignement : to counter that, simply declare your observables as readonly.

The second most common mistake is to subscribe in your component, to assign a variable in the subscribe : in that case, your subscription should always contain a detectChanges call. Otherwise, you should instead declare your observables as a series of pipe-able operators.

So, the main goals are : readonly on your observables, and no subscribe in your TS code (or detectChanges in every subscription)

Once you have done that and mastered the new strategy, you can go back to code the old way !