vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(challenge12): creation of scroll CD challenge

Browse Source
This commit is contained in:
thomas
2022-12-20 14:48:53 +01:00
parent d16ea1dcd0
commit 1560245067
4 changed files with 57 additions and 814 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/scroll-cd/README.md
View File

@@ -2,17 +2,21 @@
> Author: Thomas Laforge
<!-- TODO: add Information/Statement/Rules/Constraint/Steps -->
### Information
This challenge will teach you how to avoid unnecessary change detection cycles.
Zone.js will trigger 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](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh) and starting a new recording on the profiler tab.
### Statement
### Step 1
Your goal for this challenge is to avoid all those unnecessary change detection cycle and trigger a CD only when needed.
### Step 2
#### Constraint:
### Constraints:
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
@@ -22,9 +26,9 @@
4. **nx serve scroll-cd**
5. _...work on it_
6. Commit your work
7. Submit a PR with a title beginning with **Answer:14** that I will review and other dev can review.
7. Submit a PR with a title beginning with **Answer:12** that I will review and other dev can review.
<a href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A14+label%3Aanswer"><img src="https://img.shields.io/badge/-Solutions-green" alt="Mastering Change Detection cycle with a scroll example"/></a>
<a href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A12+label%3Aanswer"><img src="https://img.shields.io/badge/-Solutions-green" alt="Mastering Change Detection cycle with a scroll example"/></a>
<!-- TODO: uncomment when done late -->
<!-- <a href='https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A{challenge number}+label%3A"answer+author"'><img src="https://img.shields.io/badge/-Author solution-important" alt="Mastering Change Detection cycle with a scroll example solution author"/></a>