Usually it will be enough with property bindings and event bindings for most of the relations between
components
However sometimes you need to go further. Giving example: let's imagine that outside my counter
I wanna put the button to start the countdown
OK
What happens then?
Right now the only thing I can do is to update this "totalCountdown", but I will still miss
to restart the countdown.
So I will miss to call this "startCountdown" method, from the countdown component.
And right now this is something I can't do from outside of the component.
We can do this with template reference variables
So inside the app component template, I'm gonna update
this app-countdown to have a local variable that will represent this component
So I am gonna add here this hashtag
this defines a template reference variable, and I give it the name "countdown"
So right now "countdown" is a variable representing this component that allows me to use its methods inside
this template.
So, I said I wanna add the button to restart this countdown
So I create this button outside, and here I add
an event binding to the click event of the button
Then I use directly "countdown", the variable I've just created, and its method "startCountdown"
.
That is accessible from here.
Because, countdown component have this method "startCountdown"
And if there's no modifier at the beginning, this is a public method, so I can use it from outside.
This way I can call countdown.startCountdown() on the template.
I will also restart here
the counter to zero, I mean... counterProgress = 0
.
I can do this...
I mean, inside this event binding I can call
any function of the component, but I can also write
Several lines of code. And I'm updating the counter to zero here, because otherwise I have to wait to the next "tick"
that will call the updateProgress method on my component so the method really updates this value.
But, in my case, as I'm restarting the countdown
from outside, I'm also restarting the counter of my progressbar
So I call restart to this button. I'm gonna add a few styles the same way I am using this selector "app-progress-bar"
I'm gonna use the selector "button", because I only have one here. With a width of 100%
and a height of 40 pixels
Something very basic, so you can see the button centered
So if I go to see the results, I have my button here. I click and it restarts the countdown
But look careful at the counter. On every click...
...my counter starts decreasing faster and faster.
Why is this happening? This is because when I created the counter I wasn't thinking about restarting it
so I have not handled
the destruction of the counter. Right now I have several timers working at the same time.
Ok. I'll go
back to the code
I open countdownComponent.ts, and you can see the problem here
I have this setTimeout() and at each startCountdown()
It's creating a new timer. So I need to create the reference for this timeout. I do it here: "private"
countdown
timerRef
That's how it will be called the
reference to my counter. Type any and it will be initialized to null.
And then when I use the timeout, I got the reference. Here, in the setTimeout
I assign it .
this.countdownTimerRef
equals "setTimeout"
And this way I0ve got the reference to the time out.
And now what I need is a method
to clean this timeout.
So I read this method private clearTimeout
That, what is gonna do is
If this.countdownTimerRef
I mean if they have a counter, I do this clearTimeout of
this.countdownTimerRef
And finally what I do is to assign to this.countdownTimerRef the null value, again.
Okay great.
I have this clearTimeout
I need to call it in the startCountdown method
So here where I am doing (this.init && this.init > 0)
The first thing I do is this.clearTimeout(). This way I make sure I am cleaning any reference to counter
that it's already working. Back to the results:
You can see the counter here, I press "restart"
This starts decreasing. I can click several times
the restart button, but it keeps decreasing at a normal rate.
One second per number. So, this is working as expected but l don't want to disturb...
...just focus your attention on the important things. In app component, you have used the template refeference variable:
We have the reference to this component.
That allows you to use it in the rest of the template.
So here I am associating this event binding to the click event in order to call the method startCountdown()
of this other component.