Our first feature is the one belonging to the timer functionality, which happens to be the simpler one as well. It comprises of a unique component with the countdown timer we built in the previous chapters:

import { Component } from '@angular/core';
import { SettingsService } from "../core/settings.service";

@Component({
  selector: 'timer-widget',
  template: `
  <div class="text-center">
    <h1> {{ minutes }}:{{ seconds | number }}</h1>
    <p>
      <button (click)="togglePause()" class="btn btn-danger">
      {{ buttonLabelKey | i18nSelect: buttonLabelsMap }}
      </button>
    </p>
  </div>
  `
})
export class TimerWidgetComponent {
  minutes: number;
  seconds: number;
  isPaused: boolean;
  buttonLabelKey: string;
  buttonLabelsMap: any;

  constructor(private settingsService: SettingsService) {
    this.buttonLabelsMap = this.settingsService.labelsMap.timer;
  }

  ngOnInit() {
    this.reset();
    setInterval(() => this.tick(), 1000);
  }

  reset() {
    this.isPaused = true;
    this.minutes = this.settingsService.timerMinutes - 1;
    this.seconds = 59;
    this.buttonLabelKey = 'start';
  }

  private tick(): void {
    if (!this.isPaused) {
      this.buttonLabelKey = 'pause';
      if (--this.seconds < 0) {
        this.seconds = 59;
        if (--this.minutes < 0) {
          this.reset();
        }
      }
    }
  }

  togglePause(): void {
    this.isPaused = !this.isPaused;
    if (this.minutes < this.settingsService.timerMinutes ||
      this.seconds < 59
    ) {
      this.buttonLabelKey = this.isPaused ? 'resume' : 'pause';
    }
  }
}

As you can see, the implementation is pretty much the same to what we saw already back in Chapter 1, Creating Our Very First Component in Angular, with the exception of initializing the component at the init lifecycle stage through the OnInit interface hook. We leverage the l18nSelect pipe to better handle the different labels required for each state of the timer, consuming the label information from the SettingsService, which is injected in the constructor. Later on in this chapter, we will see where to register that provider. The duration in minutes is also consumed from the service, once the latter is bound to a class field.

The component is exported publicly through the TimerModule file timer.module.ts by us adding it to the declarations keyword as well as the exported keyword, the latter to enable outside access:

import { NgModule } from '@angular/core';

@NgModule({
  // tell other constructs in this module about it
  declarations: [TimerWidgetComponent], 
  // usable outside of this module
  exports: [TimerWidgetComponent] 
})
export class TimerModule() {}

And we also need to remember to import our newly created module to the root module in app.module.ts:

import { NgModule } from '@angular/core';
import { TimerModule } from './timer/timer.module';

@NgModule({
  imports: [TimerModule]
  // the rest is omitted for brevity
})

At this point, we have created a nice structure before we create more constructs for the timer feature.