RapidMod icon

Angular Increment Counter

RapidMod | PRO | 04/04/24 01:33:26 PM UTC (Edited) | 0 ⭐ | 6796 👁️ | Never ⏰ | []
TypeScript |

2.17 KB

|

None

|

0 👍

/

0 👎

/**
 * 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

  •  icon
    01/01/70 12:00:00 AM UTC
    Plain Text |

    0 B

    |

    👍

    /

    👎

    
        
  •  icon
    01/01/70 12:00:00 AM UTC
    Plain Text |

    0 B

    |

    👍

    /

    👎