Implement a Countdown Timer with RxJS in Angular

— A Reply to the article of Mwiza Kumwenda

Image for post
Image for post
Photo by NeONBRAND on Unsplash

Bundling the timer components instead of individual properties

First of all, I implemented an interface that describes an object structure that bundles the individual components of our timer (days, hours, minutes and seconds). Interfaces have no meaning for the actual logic, but are a core principle of TypeScript.

Calculation with no side effects…

In my next step, I placed the entire calculation logic (based on the original) into a single function. As a result, the logic is encapsulated and can easily be placed anywhere (separate file, function in service / component file, method of a service / component class).

Timer with RxJS…

The component itself is very slim.

The HTML Bindings…

The Result…

Image for post
Image for post
timer works

Tax consultant and IT-Nerd

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store