You have seen how to clear the Timeout to prevent duplication on counter restart. In fact, it would
be great to destroy
also the timer once the component this destroyed, just to avoid memory leaks. In this case
it doesn't really matter, because you are not navigating, and the only moment were you will be removing
-
this component, will be on page leave, but for cases like navigation
this is really important.
There's something you can do:
Adding the lifecycle hook ngOnDestroy, in your countdown.component.ts
So you come here, on top of everything like we have this onInit, we import onDestroy, and then
we say the class implements also onDestroy: it forces us to implement ngOnDestroy.
That is a method returning void, and inside it you can call this.clearTimeout(). This way you're making
sure that if your component gets destroyed for navigation.
Or wherever your timer will be also destroyed. Well, lets figure out another situation.
This counter is always starting from the same value.
It would be nice to modify the init value. I can do this coming to app.component.HTML adding
here an input
Between the counter and the button
I'm gonna create a new DIV
And this DIV is gonna be of class initInput
This will allow me later to add some styles. I'm gonna add here a label for totalCountdown
With the text "init on"
And then I create here an input of type "text"
id="totalCountdown"
.
I am gonna associate it to an ngModel binded to the property totalCountdown.
So I've just created a DIV that inside has an input and the label referencing this input
This is making reference to the totalCountdown id, and then this input with id totalCountdown
is bind to the property totalCountdown
.
There's no relation between this ID and this property.
I could
have used
A completely different id
Anyway the important thing here
is this is binded to the totalCountdown property, the one used here as an init
value of the counter.
This is a bi-directional binding
(that's why it have parenthesis and brackets) to the ngModel property. ngModel is something from
Angular that returns the content of this input
Okay I want to add some styles: app.component.scss for the class "initInput" I'm going to add this "display:flex"
and also for the input element, inside
I have a margin-left 20 pixels.
I've a height of 40px
Also a font size of 20px
flex 1, and min-with 50 pixels.
So now I come to see the results. I've got here
This init on
I can change it to 50, click restart... and OK it's working fine.
There's a bidirectional binding here and whatever I write here is updating the variable totalCountdown.
.
However as I don't restart the countdown is not restarting with a new value, but it works when
I click the button.
Ok so... what's next?
Well I like to reset directly the counter when the user changes
the init value. When you want to execute some action on changing input properties
what you need is the lifecycle hook ngOnChanges.
So back to countdown.component.TS like the onDestroy, we import the OnChanges, and implement also
the onChanges into the class
finally I have to create the method
ngOnChanges
Of type void
That in fact is receiving as a parameter the changes
And you can use those changes inside, so console.log("init Value")
update to... and
I pass here changes.
init.currentValue
Okay you might say...WHAT? "changes" parameter has the same properties than your Inputs, and then for every of those
properties, you have
several data like the old value or the current value.
I console logged it, you so you can't see it.
But in fact what I wanna do on changes detected is to reset the counter, so I call this.startCoundown()
again.
Back to the results.
You can see that it works fine, and in the moment
that I update the input, the counter on the progress bar automatically updates, so I can read this init value
udpated to 150. Anyway
The important thing here is that in the moment I make any change here... so I am changing this input...
this input change affects the property totalCountdown,
This totalCountdown property is the parameter I am binding to the app-countdown component, and in the countdown
component I've created this ngOnChanges
So when I detect changes in the
init property... that is the one changing in this case... the counter is going to restart
So summing up:
You have seen a couple more lifecycle events of the components.