Angular good practices recommends to avoid logical templates.
This way, your template is more readable and it's easier to find design issues that can affect your
performance.
Here you have an example of what I'm saying and some component XHTML.
You're comparing the progress in the same template here.
This is not the recommended way AngloGold practices recommends to em, but this logic into the component
by creating a bit of property that in fact will be a better this way.
It will be easier for you to improve the performance of your app.
So how to do it?
I copy all this logic and replace it by the progress property.
I'm going to create now this property and so the component.
So I move to Tamai components and here I create the ghetto with this logic, get progress.
And so here I do a return of this, that in it this is the time.
Countdown down.
Think there's a lot in it.
Of course there's not going to work right now because of the pipe.
I will solve it now.
But first, let me explain.
What is this.
Get keyword.
They get keyword in the script allows you to define the axis of a property in programming.
This is known as a guitar and the scarers.
The progress property does not really exist.
But defining this get is like it works like a real property.
So my template can use it.
And when I use it, in fact what I'm doing is this.
To call this method here and get the result, say that let me resolve these with the same pipe.
The use cases for pipes is on templates.
So if you use the absorbable from typescript, it makes more sense to subscribe.
So I am going to create an inner reference, private count on subscription.
It will be a lifetime subscription and internal and then here in engineering it either this that can
on subscription equals this the time that my absorbable that subscribe hearings I a narrow function
with a data written on by the absorbable.
So every time I get an email there was the venue, Baalu, and instead here I'm going to send it to
a new property that they will create just keyer public countdown type number and it to zero.
So here I can there's that countdown equals data.
I close here.
Let me make this right here and now I have a reference to my subscription and undestroyed.
I have to unsubscribe with this upcoming subscription that and subscribe now I can use this that then
instead of this time I can on a sink.
So I replace it for this, that countdown and the my template I don't need anymore this time I count
on the async because I already have this kind of property that up that's with absorbable events.
So I finally replace the zinc pipe by creating a subscription by hand.
However, I have this get progress now that is the property bindert and my progress.
Well then if I move to see the results, they should work absolutely fine.
I click some buttons and you can see how the progress bar is working.
Fine, ok.
Why are you so important then to move all this business logic from the template side to the typescript
component?
Well, let me cancel something every time the progress getter is called.
So every time this practice property is checked, I console luck gathering progress.
If I'm off to the browser, I can see a lot of getting progress.
Luks here.
I can claim this click play and as you can see, every tick of the clock I'm getting my duplicated is
getting progress printed three times each.
This is because of the word tense addiction strategy we are using in the next video.
I'll explain this with more detail.
But right now let me tell you that by moving the logic from the template to the component, it has been
easy for me just to add this cancer luck and this way realize that I am doing these calculations many
more times than necessary.
This code can be much more optimized.