I told you, the time component is a container, if I move the timer component to, as I can see here,
the input to utilize it on the output, there's a complaint that the medicine, even when the candle
has finished it, also have a couple properties.
The reference to that time out and the real countdown that we can say it's like the state of this component.
It also has the methods to start this countdown.
We have start countdown, the countdown, process, countdown and clear time out, as you can see this
company and have everything needed to handle this countdown state and the little bit of logic.
So this is a stateful component container.
OK, I'm going I add more logic to this container.
I want to be able to put the counter on both.
So this container must now handle also this logic and the related buttons.
I begin by creating the Post-it prop..
This public posit that will be a boolean on the timer will start post.
Well, this property I will handle the state play portion of the timer.
Now the timer wants that by default.
So I kind of remove this scandal from the end in it.
And the only thing I will do here is the end of this timer if there's that in it.
And is that need?
Is greater than zero.
Then in this case, there's that Cannon is going to be equal to this, that in it this way I'm setting
the initial value of the count them.
OK, I'm going to rename the state control method to restore Cannon more appropriate that I will do
this.
The deposit equals through and continues this time around.
This Escandon equals in it.
And then there's the cannon is no more needed.
So I remove it and that's because don't count on is not going to end the cannon anymore.
The only thing it will do is just to reset the counter.
But the comedown down will be started with the play start button.
So to play or pause the counter and to create a new method, I'll call it to go come down here.
What I do is to change the state of the property.
So this equals the opposite of this.
The Post.
And then I gets this, that post is false.
I mean, I was post and now I am not, then I have to call this to count.
So if I'm not post anymore around the come on my game, otherwise I only have to clear this time out
this way, I'm removing the set time out.
So the countdown stops.
OK, now I have the logic affecting my timer and the other thing I have to do, it is a template.
So in my company e-mail instead of this button here, what I am going to read is a dip that's going
to have buttons inside.
I will send here the class buttons to the platform styles.
I already have in them a component success.
And then I could press this button and when I had an NGF.
So this only shows and case of post.
Wudang will do it, will count on and it will display the next play and I'll copy it, renamed the new
one to post and it will be shown otherwise.
And if is a structural directive associated with a condition that puts the element on the dome and remove
it, otherwise, I will add a third button to call the method restart countdown even beginning to click
restart countdown.
So I restart the counter and the next here will be a restart.
OK, so as I said, this glass button is here in the main component.
Success and everything should show the right layout.
And if you see the results, you can see everything here was at the counter to sixty five seconds.
So one minute, five seconds.
It is by default.
If I click play, the countdown begins.
And at any moment I can pause it if I click play again, it continues with the countdown.
And finally, if I click restart the account changes to the initial value.
Sixty five seconds and it remains a stop and all the time.
So I can start it again by clicking play once again.
It's interesting to see how we have added more logic, but we can see in this logic is more concentrated
in one only element we can see here in time.
A component is that all the methods we have are only related with that logic.