Skip to content

Latest commit

 

History

History
42 lines (26 loc) · 2.28 KB

README.md

File metadata and controls

42 lines (26 loc) · 2.28 KB
Raw

Mastering Change Detection cycle with a scroll example

Author: Thomas Laforge

Information

In this challenge, you will need to optimize the change detection cycles run by Angular.

Zone.js triggers a change detection cycle each time a scroll event is dispatched. However we only want to show or hide a button at a specific scroll position. Therefore, we only want to refresh our application once.

You can vizualise how many times CD is triggered by installing the Angular chrome devTool and starting a new recording on the profiler tab.

The following video will explain what is the goal of this challenge.

angular-challenge.-.12.mov

Statement

Your goal for this challenge is to avoid all unnecessary change detection cycles and trigger a CD only when needed.

Constraint:

You cannot opt-out of zone.js. If this code is part of a large project and you opt out of zone.js, you will break many things within your application.

Submitting your work

  1. Fork the project
  2. clone it
  3. npm ci
  4. nx serve scroll-cd
  5. ...work on it
  6. Commit your work
  7. Submit a PR with a title beginning with Answer:12 that I will review and other dev can review.

Mastering Change Detection cycle with a scroll example

You can ask any question on twitter