How do I bind fields in Angular?
I'm working on a project where productivity is critical as it focuses on mobile with few resources.
In the end, I confirmed that Angular binding might not be as efficient as I expected, as I imagined triggers to validate a field would be through observing them or checking their sets. But it seems that monitoring a change is the entire application context, and any change in any instance of the context (even in isolated components) causes all fields of the context to be checked, even if the change is not relevant to it.
I created an example in plunkr to try and illustrate this behavior.
I have some questions about this behavior:
- Is this behavior expected?
- Is it possible to change this behavior to something more efficient (which doesn't check everything with every change in context)?
- At the component level, you can create some isolation. So changes in the context of a component are not triggered by checks outside their own context?
source to share
Angular change detection is extremely efficient, especially if you are considering multiple things
- only binding to fields (getters and methods are slower, especially binding to getters or methods that contain non-trivial code is generally a bad idea)
- use
ChangeDetectionStrategy.OnPush
where possible. This reduces the detection of performance changes. lot - use observables to change settings instead of letting change recognition recognize them (especially effective with
OnPush
)
source to share
In your Plunker text box
is a child component.
When a child component has an asynchronous event where Angular has hooks like onKeyUp, after the event ends, Angular will trigger change detection to make sure nothing has been updated in the model, but in order to achieve this it must start at the root of the application before that particular component.
So,
if you put the input in the parent element, child change detection won't fire if you use changeDetection:ChangeDetectionStrategy.OnPush
on it.
source to share