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): add challenge 12 scroll cd

Browse Source
This commit is contained in:
thomas
2022-12-28 14:24:52 +01:00
parent dc0aa213e5
commit d85f70ff3a
2 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -31,8 +31,7 @@ This goal of this project is to help you get better at Angular and NgRx by resol
<a href="./apps/pipe-easy/README.md"><img src="https://img.shields.io/badge/8-simple pure pipe-green" alt="pipe easy"/></a> <a href="./apps/pipe-easy/README.md"><img src="https://img.shields.io/badge/8-simple pure pipe-green" alt="pipe easy"/></a>
<a href="./apps/pipe-intermediate/README.md"><img src="https://img.shields.io/badge/9-wrapFn pipe-orange" alt="wrapFn pipe"/></a> <a href="./apps/pipe-intermediate/README.md"><img src="https://img.shields.io/badge/9-wrapFn pipe-orange" alt="wrapFn pipe"/></a>
<a href="./apps/pipe-hard/README.md"><img src="https://img.shields.io/badge/10-utilities pipe-red" alt="utilities pipe"/></a> <a href="./apps/pipe-hard/README.md"><img src="https://img.shields.io/badge/10-utilities pipe-red" alt="utilities pipe"/></a>
<a href="./apps/scroll-cd/README.md"><img src="https://img.shields.io/badge/12-change detection -- scroll-orange" alt="change detection with scroll event"/></a>
<!-- <a href="./apps/scroll-cd/README.md"><img src="https://img.shields.io/badge/12-change detection -- scroll-orange" alt="change detection with scroll event"/></a> -->
</br> </br>
<img src="https://img.shields.io/badge/RxJs--gray?logo=rxjs" alt="RxJs"/> <img src="https://img.shields.io/badge/RxJs--gray?logo=rxjs" alt="RxJs"/>

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

@@ -4,12 +4,14 @@
### Information ### Information
This challenge will teach you how to avoid unnecessary change detection cycles. In this challenge, you will need to optimize the change detection cycles run by Angular.
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. 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. > 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.
The following video will explain what is the goal of this challenge.
### Statement ### Statement
Your goal for this challenge is to avoid all those unnecessary change detection cycle and trigger a CD only when needed. Your goal for this challenge is to avoid all those unnecessary change detection cycle and trigger a CD only when needed.