LouisSung/Angular_decorator-Debounce_and_Throttle

Angular decorator to add debounce or throttle to functions (in order to reduce frequency of event trigger)

Debounce and Throttle decorator for Angular

- Angular Environment

Angular@~8.2.14

- HOW-TO

1. Execute run_app.sh

./run_app.sh

This script do:

1. Check if folder app/node_modules exists, and run npm install if not
2. Move the .ts file decorator.debounce-throttle.ts into folder app/ so that Angular is able to find it
3. Run a tmp server on port 4200. Check it on http://localhost:4200/

2. Resize your window and check the log in consloe

• Look like this if using default setting (without giving params)

3. Change settings by passing parameters (e.g., use throttle rather than debounce)

• Change (or add) @debounce_or_throttle(x, x, x) in your own *.component.ts, e.g., app.component.html in this demo

- Reference

• Following refs help a lot when writing this decorator script

1. Intro and examples for debouncing and throttling
2. Angular window resize event (@HostListener)
3. Angular Debounce decorator example
4. Throttle implementation

Bug fix

5. TypeScript method decorator — 'this' with noImplicitThis enabled

• These Q&As on stackoverflow help on fixing the bug: this = undefined
• Fixed on #L23 & #L55
  • By adding this as the first arg (because arrow function not allow doing so, the name _dummy is given)

- License

• This project is licensed under the MIT License
  Feel free to modify it to your own version as needed
  • Remember to remove all console.log() before really using the decorator (at lines #L31,33,41,45,47,58,60,65,67)
  • Since this project is more for a demo rather than a production
• I am the beginner of Angular, so feel free contact me if having any comments :D