[Ionic 4] How do I make a countdown timer with Angular?

Ionic Framework
1

How do I Make a Simple Countdown Timer?

Thanks!

2

I believe there are plenty examples in javascript, which you can use in an angular project. The angular angle will probably give you hassle in change detection if you use one way binding. There you could try a manual update using zone or other manual change update changedetectorref or something…

Or use the viewchild to update the DOM content directly in order to keep up with the changes in time (through the nativeelement). This to have the angular way of finding the DOM element (getElementByID)

My 2 cents

3

i used this in in one of my project. may be it will help

https://codepen.io/zebateira/pen/VvqJwm

5 Likes
4

Very cool!

With css and all that!

1 Like
5

I want to countdown with date from API service. No content related to this topic.

6

Cannot use it…dddd

Error:
Type ‘number’ is not assignable to type ‘string’.ts(2322)

7

you can simply write the toString() function to avoid issue.

8

Its not working, it says:

core.js:4197 ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'textContent' of null
TypeError: Cannot set property 'textContent' of null
9

As I understand, Your code not able to find that element of id ‘countdown-number’. Are you sure you have this element in your html page? And if possible, can you share you html code?

10

Thanks i fixed it, but now i would like to know how to execute something when interval finishes, thank you!

1 Like
11

I would use RxJS’s interval operator to do this, which provides a very clean segue to your question about how to do something when the countdown finishes, by combining the take and finalize operators.

2 Likes
12

how did you fix the above error of ‘textContent’ null?

13

The error you’re asking about is in code that does direct DOM access. That’s something you virtually never want to do in an Angular app. Let the framework interact with the DOM using bindings instead.