This percentage here is not gonna be a fixed value
Remember that progression must be decided by the countdown, this component from here.
So first things first I have to include it in the main module.
So if you go to app.module.ts, you can import it from ./countdown/countdown.component
The countdown component class
And I have to import it in declarations: CountdownComponent
So great
It's imported, now you can use it.
And this component needs an input property that will be called "init" and the property "count"
So if we come here, you first need this "Input" import so you can use the decorator.
Now you can use this @Input decorator and then create the init property, that it's an entry value
And I haven't said it, it's gonna be of type number.
I can set the initial value to NULL, although I expect it to be initialized from the outside
But these way I make sure I have an initial value. And they will also need a counter property
that's gonna be of type number,
public, so I can access from the template.
that is the property that will handle the countdown of this component so init is just the initial value...
...but counter...
...will we changing with every "tick".
Okay.
So you have this component that can be used with the init property.
So I can come here and make an app-countdown
With an init property where I will give a value of 10.
So if you come to see the result you're only seeing this countdown component text
And that's because that's what the template says. That I want to change it.
So I came to countdown.component.html and I can replace the text by the countdown
property, with double curly brackets to get the value
Now I can see the initial value as zero
But you don't want it to be zero. You need that countdown. So move into the countdown component
What you have to do is to create a method startCountdown that will init the countdown starting on
the init value.
So I start creating this startCountdown()
That is a method that checks if you have this init value
And also if this init value is greater than zero... ...and then you going to say that this.counter
equals to this.init
So you initialized the counter, and then you call the method that's gonna start the countdown
"doCountdown", that you are gonna create right now.
So I move below to create this "doCountdown" ... very simple
It's going to use the set time out function
that is a method that allows you to call a function with some delay
So I can pass inside an arrow function, and inside this arrow function
I decrease this.counter by one.
Then I call this.processCount()
That is a method we will create right now to check if we have arrived to the end and will throw an event
for every tick of the counter so we can see the evolution of the counter.
And this is going to happen every second so every second we are calling this function
We are decreasing the counter and we are calling a method that is gonna handle some things about the count
So I create right now
this processCountdown Ok
What this method is going to do is to emit an event with the current count. At this point without knowing
how to emit events so I'll write some comment for later. And then I'll write a console.log with the current
count
And then also in the case that the counter arrives to the end
I can emit another event, so
if this counter is zero I can emit an event "counter end" that I'll show you soon how to do it.
And of course that console.log "counter end". Otherwise I'll call another time
this.doCountdown
Okay.
So when I executed the countdown I put the timer and then after one second...
...it decreases the counter and calls...
this.processCountDOWN()
check this "typo"
So it calls this.processCountdown() that will emit some events, and if the countdown has not finished, it calls another time
this.doCountdown() method
So I have a method to initalize the counter, a method that handles the countdown, and the method that
checks if the countdown has finished or not and that emit events.
But I need to initialize this countodwn somewhere.
That's something that you can do with the lifecycle components.
All components have some lifecycle events.
And there's one that is called onInit()
So I can import this OnInit
I can say that my class is implementing this OnInit interface and these forces me, of course, to implement
the methods of this interface.
So I have to create this function ngOnInit() and here...
...inside this method I can say what I want it to do in the init phase.
In my case this.startCountdown(). If I move to see the results I can see that here's a countdown, that
the moment I refresh the page starts from 10 and it's going down until arriving to zero.
Also you can see on the console how on every "tick" I am printing this information out until I arrived
to zero, when I print this counter end. However check that the progress has not been updated because
we haven't touched this yet. and just let me make a little, little change on the Sass side so the counter
can look bigger and nicer. I'm touching this :host with 100% a centered text
With the text-align
And with a font size of 4 em.
Okay.
Now if I move to see the results, I can can see a
bigger counter
now in the middle.