I'm going to briefly show you the new structure.
If you open up components that it's HTML, you can see in that time a component within its property
here and passing the number of seconds I want this country to have.
Let me make him a spoiler.
There's a timer is a stateful component, also known as a container.
I'm not going to enter the details, but if I go to the template, it's the amount I can see that an
Apple Grassby, an Apple display components as well as a button.
And at the first I'm going to be stateless.
So those will be components whose only task is just to handle how to display the information I'm passing
from outside through the properties, progress and time.
If you open the progress by component, you can see that here.
In fact, there's no logic.
The only thing you have is that input.
Progress that is with the parent component to the timer will use to tell me from the outside, which
is exactly the process I have to show them here moving to the template.
The only thing I'm doing here is just to show this progress based on this input.
So this component, you don't have to think about anything.
The information it gets from the outside is the information it's using.
So we don't have to think about how to obtain this progress.
And that's why this is a dumb component.
And the same applies to this play component here.
We don't have any kind of logic, just an input, this input time.
So if I move to the template, the HMO, what I see is I'm just showing the value of time.
I want to change briefly these components in order to display minutes and seconds, and it will keep
being as that list combined.
So I remove this and I'm going to create something a little bit more complex and just create that.
If for the minutes I put Subrata in the middle and finally I'm showing also the seconds.
As you can see, I've changed the way to display the information, but I also have to define those variables.
So I move to the typescript part of my component.
And here and when I create those two properties up, public minutes of type string, it will be string
because I want to show a zero at the beginning as the numbers lower than 10 and they do exactly the
same for the seconds.
So I show the string with two zeros.
OK, what I have to do now is to get the logic to transform this time into minutes and seconds before
entering here.
Although Islam component, there's nothing wrong when adding logic for internal usage.
And in this case what we are doing is just formatting the entry information.
So here I will make the computations everytime that input property is updated in order to add those
properties minutes and seconds.
I'm going to do this every time this property updates, so I have to do the changes lifecycle the class
have to implement on changes and then I have to implement this and on changes I get the changes object.
Remember that this object is receiving all the input properties of my component.
So in this case I only have time.
If changes the time, then I get the minutes.
That will be the current value I have divided by 16 and getting just the entire part.
So I use my little trank that gets the integral part of changes the time, the current value and is
divided by sixty and for the seconds and one of the or something similar.
But in this case, simply because the seconds, I want to be just the difference between the total seconds
I'm receiving.
And those minutes multiply by 60 in order to know how many seconds had those minutes have just created
those const variables instead of singing the values that led to my properties.
Because what I want to do here is just make sure that I'm showing to digits.
And as a way to this is creating a string like this, there's not many equals a string starting by zero
and then the minutes.
So I put the zero before the minute variable I get from here so I can get the last two elements of the
string.
I can do this with the method.
So as they're starting by next to.
That means two positions from the end towards the beginning, and as there are no final position, it
means until the end and with the seconds I can do exactly the same.
There's not seconds equal zero plus the number of seconds.
And then I substring I mean, that's Joe.
I can go to see the results now.
But before this, I want to change in the app component template.
So instead setting a timer with 20 seconds I can put 65.
And this way I can also see how the minutes are also changing in the display.
If I alter the results, it updates half one minute, five seconds, four, three, two is going down
and then I can see how the minutes are also perfectly updating from one to zero and seconds are going
down from 60 as expected.
It is very important to understand what we have just achieved thanks to this concept separation between
containers this time of you're seeing here and presentational components those aren't from here have
been able to change completely the way to display the content from here without having to change the
appetizer container.