/**
* Angular Increment Counter Component
* Author: RapidMod
* Website: https://rapidmod.io/
*
* Description:
* This Angular component features an increment counter that operates based on predefined increments and intervals,
* showcasing dynamic "Go" and "Stop" states. It demonstrates the use of async/await patterns within Angular for
* managing timing and state transitions in a web application. The component utilizes a utility function for delays,
* iterates over a predefined array of increments to manage counter states, and provides a method for a continuous counter
* based on component state.
*
* Key Functions:
* - ngOnInit: Component initialization, invoking item retrieval and counter operations.
* - wait: Utility to create a delay using Promises.
* - intervalCounter: Processes an array of increments, applying "Go" or "Stop" states with varying intervals.
* - startCounter: Initiates a continuous counter that increments until a "Stopped" state is encountered.
*
* The component is designed for demonstration purposes, highlighting asynchronous operations in Angular components.
* The implementation details are provided by RapidMod, showcasing best practices for asynchronous JavaScript in Angular.
*/
ngOnInit() {
this.getItems();
this.intervalCounter(text => console.log(text));
this.startCounter(text => console.log(text));
}
wait = (ms) => new Promise(res => setTimeout(res, ms));
//foreach these in interval counter
increments = [
{label:'Go',val:3000},
{label:'Stop',val:2000},
{label:'Go',val:1000},
{label:'Stop',val:3000},
{label:'Go',val:4000},
{label:'Stop',val:1000},
];
intervalCounter = async callback => {
this.counterStatus = "Active";
for (const increment of this.increments) {
callback(increment.label);
await this.wait(increment.val);
}
this.counterStatus = "Complete";
callback('Complete');
};
//second counter
counterStatus = "Stopped";
startCounter = async callback => {
let i = 0;
while (this.counterStatus !== 'Stopped'){
callback(i);
await this.wait(1000);
i++;
}
};
Comments
0 B
|👍
/👎
0 B
|👍
/👎