Angular project folder structure

“Change Detection”?

Change Detection means updating the view (DOM) when the data has changed.

Change Detection is done in two steps

1. Update the application model (developer);
2. Reflect the state of the model in the view (Angular).

If we take a todo application, represented by the graphic above. We have a fairly simple application that has a TodosComponent managing a list of TodoComponent. If we modify this list, by changing the value of the first item of the todos’ list (in yellow), we will have the following flow:

1. The developer is making changes to the model (like a component’s bindings);
2. Angular’s change detection kicks in to propagate the changes;
3. Change detection goes through every components in the component tree (from top to bottom) to check if the model it depends on changed;
4. If Yes, it will update the component;
5. Angular updates the component’s view (DOM).

The way Angular runs the change detection by starting from the top and continuing until it reaches the bottom, makes the system more predictable and more performant.

Angular Change Detection Strategies

Angular provides you two Change Detection Strategies, the default one and the onPush.

ChangeDetectionStrategy.Default

By default, Angular has to be conservative and will checks every time something may have changed, this is called dirty checking.

ChangeDetectionStrategy.onPush

With onPush, Angular will only depend on the component’s inputs, events, markForCheck method, or the use of the async pipe in the template, to perform a change detection mechanism and update the view.

Subjects 

In order to understand the difference between a Subject and an Observable, you need to be aware of two distinct concepts
– A data producer
– A data consumer

Example 2

Observable wrapped in a subject, causing shared execution

Angular switch map and merge map

Rx js debounce and total

diff between observable and subject

weekset and set

Angular change detection

array fill