Right now, your time component has physiologic inside, but the amount of logic might increase both
because of how to handle the view or how to calculate this candombe.
AngloGold Practice's tells you to use the single responsibility principle.
And in this case, we are not following those principles because the container shouldn't know how the
candle is computed in order to do that.
We have services so to solve this issue and one or more of the logic of the timer to establish that
will be called timer service services.
Our single Don't Object where you should put the business logic of your application.
So right.
Click on time a folder make in your file.
And when I call a timer that as the tears and here I will create the basic structure of the service.
I have to import from.
Angela Gaudette.
Injectable, then I use the injectable decorator before the glass export glass temp service, right
now, it's an empty glass.
The only thing I'd have is an empty constructor.
Well, this is more related to services, but injectable, the greater I'm using before the time our
service class, it's not really needed right now, but it's something we are commanded to do when you
create services.
Because this way you're saying that this service can inject all the services.
So if in a future your service spend on other services you don't get issues with and will are not understanding
where this service comes from or how to create it anyway.
My service is created now and I'm on a base there.
All the logic from my Tamai component.
I start by the properties related with the Tammet.
I'll pass them here.
And now I could be Method's from Engin Destroy.
Until cleared of time out.
Gadhia.
Based here.
I great also new property in it in the service.
Private, any?
No.
To zero, now I will update the methods that Khanum to Basileus an argument here in Ristic.
I can receive this and it's valid but it's optional.
It's way to use the question mark then.
If it exists I send it to the end.
It's private property I have just declared.
There's that and it equals the unit I have received honors that count as an argument and way because
Mr. Cannon is going to be called from the command type so that they can learn and then it will be also
called here with no innate value to wrestle the candle and to come in.
Now, this land, this time it.
We'll talk later about how to do this from a service and we move to the next point.
This and undestroyed.
Our services do not have the life cycle of the components and undestroyed is not going to be called
anytime.
So what we can do is to create a method, destroy that calls this clear time out.
And so the components we create an engine destroy and here we destroy our time.
OK, I have this time of service ready.
It contains now all the business logic of the time.
But now I need to inject it and use it.
In this case, I'm going to do it at the component level because this service is handling the state
of the company.
I come here to the company of the creator and providers and the inside the expected the rate I at the
time of service.
I have to import it also, of course, as you can see here in Baltimore, service from time to time
or service or simply not in service.
Now, Anglo knows how to get the provider of time of service, but I need to pass it for dependency
injection to the constructor of the time, a component.
So I declare this argument public term of type Taimur service this way.
I'm declaring in this class appropriately time.
That will be the last time.
A Service by Angela.
Inside the ninet component is not using this cannon anymore.
I will just call this the time of the restored condone.
Remember now, again, puzzling in its value, so I pass here is that it didn't show value.
So now in the end, the method of my component, the only thing I'm doing is restart my timer in a very
similar way in my engine, destroy.
If my company gets destroyed, I will call this the time they'll destroy.
This way the timeout will be canceled in case there's one running at the time.
Well, you know, coming up now looks cleaner, but don't get confused.
It is still a stateful component because it is communicating with the service to get better and even
manipulate the data.
And in fact, that's why we have to now just manipulate the state with the play and those buttons.
So we move to the time template.
You can see, of course, that nothing of this is working because I have to update it to use my service
here.
I can use in progress in eight minutes time at the countdown because Countdown is a public property
of my service.
Also in the time binding, I use time.
I don't count them.
I do the same also with the password usage.
And also with it will come down, time to come down and finally time are restored, calm down.
After all those changes, if I go to the browser, I should expect it to work exactly the same as before
the refactor.
It's already the last.
If I click play, the countdown begins.
No problem.
If I pause it, it stops.
I press play again.
Countdown continues and if I click restart, it resets and then I can use it another time as expected.
So my timer component works exactly the same as before but with a difference.
And now all the reasons.
Logic of the timer.
It's inside our service.
So now my component looks much more cleaner, although it keeps being a component because it's handling
this timer and it's able to change the state, as you can see here in the template.