Instead of console logging the remaining time, what I'd like to do is to show this progress in the progress bar
that is a component that don't have access to the countdown component
Remember that here in the main component I have on one side this app-progress-bar component, and in the other side
This app-countdown, they don't have access between them.
So let's move to the countdown component and let's create a couple properties with the
output decorator, because we will emit the current count and also the countdown end, so first we need to import
this output and then we can define those properties with the output decorator onDecrease in case
we are decreasing the counter. You need to initialize it like an EventEmitter
In this case it will be type number because it will be returning the count.
Of course you also need to import this EventEmitter from @angular/core
And then we're going to do exactly the same with the other event,
that tells me that the countdown has finished. onComplete: the same, a new EventEmitter
In this case returning void. And this way we have both outputs. The same way I have an input...
...now I can access this onComplete and onDecrease from that template
but in this case those will be associated with functions and those functions will be called
from the same component
So here in processCountdown I'm gonna change those comments.
First this "emit event COUNT" I'm gonna change it by this.onDecrease.emit()
It's very important to put this emit
(don't forget it). And sending the value this.counter.
Remember that onDecrease returns an EventEmiter of type number
And then this other comment, I'm gonna change it by
this.onComplete.emit()
And in this case I am not emitting any kind of value because when I am sending this event, I'm just saying
my countdown has finished. So your counter is emitting the real countdown, and what need is, on its container...
the component has app-countdown. So in app.component.ts, what I'm gonna do is to create a couple properties
to handle this counter: counterProgress of type number (I init it to zero) and a totalCountdown that will store
the initial value (that I will default it to 15)
I also need to create a couple methods that will be called through those bindings
So on one side I want to update the counter, and the other side I want to know when the
countdown has finished. So first,
I create this updateProgress, with a $event argument and here what I do is to update
the counter of the parent component: counterProgress
So this counterProgress is equal to this.totalCountdown less $event, divided between this.totalCountdown
and multiplied by 100. Why?
Well because this counterProgress , what it have to do is to return the remaining percentage to the
end of the countdown.
That's why I take the maximum countdown, I substract the current countdown, I divide it by the total
and multiply it by 100. Ok, also countdownFinished...
This is the function that I will associate to the onComplete method
And here I simply console.log
Countdown has finished.
Okay great.
You have a component that is emitting events his parent component
where this one is placed, is able to receive those events
I have some methods to handle with them.
The only thing we have to do is to update the template.
app-countdown has this init value. Right now is not gonna be a fixed value
but it will be the property totalCountdown
Then I need to add a binding with the brackets.
So now every time this property (totalCountdown) is updated
the init value will be
updated too.
I'm gonna add also, an event binding to onDecrease. I said that onDecrease is one of those properties
but its an output property. And what I have to do is an event binding. So, I need the parenthesis
and I bind it do this updateProgress($event), that is a method of my own component.
So I am associating this method updateProgress to every call that is made to onDecrease...
...so onDecrease will call this updateProgress and I do exactly the same with oncomplete, and in this
case onComplete will call countdownFinished.
Remember also to update the binding of the progress bar.
This won't be a fixed value but it will be
a property binding of the counterProgress property.
Okay. If we go to see the results...
I reset the counter and check it out. It stats on 15, it starts counting...
...more important the progress-bar is updating also and the progress-bar don't have any kind of direct connection
with this counter.
The counter is doing the countdown, on one side
This counter is emitting the events onDecrease and onComplete.
Those methods are linked with updateProgress (in the parent component) that updates the variable counterProgress
and this way we are passing this
updated variable to our progress bar. So at the end what I have achived
is just to bind the information between those two components, through the parent.
So now I have a view with this countdown.
However it is separated into several components.
This progress bar and the countdown component