Create a new timer.component.ts file in the same folder and populate it with the following basic implementation of a very simple component. Don't worry about the added complexity, as we will review each and every change made after the code block:
import { Component } from '@angular/core';
@Component({
selector: 'timer',
template: `<h1>{{ minutes }}:{{ seconds }} </h1>>`
})
export class TimerComponent {
minutes: number;
seconds: number;
constructor(){
this.minutes = 24;
this.seconds = 59;
}
}
At this point, we have created a whole new component by creating the TimerComponent class and decorated it with @Component, just as we learned how to do in a previous section. We learned in the previous section that there is more to be done, namely to tell an Angular module that this new component exists. The Angular module is already created so you just need to add our fresh new component to its declarations property, like so:
@NgModule({
declarations: [
AppComponent, TimerComponent
],
bootstrap: [AppComponent]
})
As long as we only had the AppComponent we didn't really see the point of having an Angular module. With two components registered with our module, this changes. When a component is registered with an Angular module it becomes available to other constructs in the module. It becomes available to their template/templateUrl. This means that we can have TimerComponent rendered inside of our AppComponent.
Let's therefore go back to our AppComponent file and update its template to show just that:
@Component({
selector: 'app',
template: `<h1>{{ title }}</h1> <timer></timer>`
})
export class AppComponent {
title: string = 'hello app';
}
In the preceding code, we highlight in bold how we add the TimerComponent to the AppComponents template. Or rather we refer to the TimerComponent by its selector property name, which is timer.
Let's show the TimerComponent again, in it's entirety, and highlight the selector property because this is a really important thing to understand; that is, how to place a component in another component:
import { Component } from '@angular/core';
@Component({
selector: 'timer',
template: `<h1>{{ minutes }}:{{ seconds }} </h1>>`
})
export class TimerComponent {
minutes: number;
seconds: number;
constructor(){
this.minutes = 24;
this.seconds = 59;
}
}
We want to do more than just display a handful of numbers, right? We actually want them to represent a time countdown, and we can achieve that by introducing these changes. Let's first introduce a function we can iterate on in order to update the countdown. Add this function after the constructor function:
tick() {
if(--this.seconds < 0) {
this.seconds = 59;
if(--this.minutes < 0) {
this.minutes = 24;
this.seconds = 59;
}
}
}