6. Change Detection

Transcript

2. Today's Schedule 1. zone.js 2. Change Detection 3. Content Projection
3. How does angular know when to update the bindings? https://github.com/angular/zone.js/
4. zone.js • Monkey patches the world - every single async api • Provides context The zone is an execution context that is passed to the callback function of the async operation and when the callback is executed the zone is alerted about the change.
 ($digest) https://github.com/angular/zone.js/blob/master/lib/browser/browser.ts
5. zone.js Usually we don't need to care about zones but there are times when we need to like when we are doing a complex animation or third party services
6. Change Detection
7. Change Detection Change Detection mechanism detects when data changes, and then automatically re-renders the view to reflect that change.
8. Application State Change • Events - click, submit, … • XHR (Ajax) - Fetching data from a remote server • Timers - setTimeout(), setInterval()
9. Change Detection Mechanism Every Component has an change detector and what it does is: 1. When a change occurs the change detector compares for each expression in the template the current value of the property used in the expression with the previous value. 2. If the property value before and after is different, it sets isChanged to true.
10. Change Detection
11. Change Detection
12. Change Detection
13. Change Detection
14. How fast is the Change Detection?
15. Change Detection Time = C * TotalNumberOfBindings C - average time to check a binding
16. Angular 2 generates Virtual Machine (VM) friendly code so it can perform thousands of Change Detection Runs in milliseconds.
17. How to optimize the
 Change Detection Traversal ?
18. Change Detection Strategies • ChangeDetectionStrategy.OnPush 
 The change detector's mode will be set to CheckOnce during hydration (It compares values by reference) • ChangeDetectionStrategy.Default 
 The change detector's mode will be set to CheckAlways during hydration
19. https://plnkr.co/edit/4HG4sDcdTleRXlNafETH?p=preview
20. @ContentChild @ContentChildren Searching for components or elements in located between the closing and opening tags of component / directive.
21. Content Projection Content projection is a way to import HTML content from outside the component and insert that content into the component's template in a designated spot. 
 <ng-content></ng-content>
22. Multi Slot Content Projection <ng-content select="css_selector"></ng-content> For having more control over content projection
23. @ViewChild @ViewChildren Searching for components or elements in the template of the Component.
24. AfterViewInit and AfterContentInit Hooks • The AfterView hooks concern ViewChildren, the child components whose element tags appear within the component's template. • The AfterContent hooks concern ContentChildren, the child components that Angular projected into the component.
25. Questions?