So far, we have reloaded the browser and played around with the newly created toggle feature. However, there is apparently something that still requires some polishing: when the seconds counter is less than 10, it displays a single-digit number instead of the usual two-digit numbers we are used to seeing in digital clocks and watches. Luckily, Angular implements a set of declarative helpers that format the data output in our templates. We call them pipes, and we will cover them in detail later in Chapter 4, Implementing Properties and Events in Our Components. For the time being, let's just introduce the number pipe in our component template and configure it to format the seconds output to display two digits all the time. Update our template so that it looks like this:
@Component({
selector: 'timer',
template: `
<h1>{{ minutes }}: {{ seconds | number: '2.0' }}</h1>
<p>
<button (click)="togglePause()">{{ buttonLabel }}</button>
</p>
`
})
Basically, we appended the pipe name to the interpolated binding in our template separated by a pipe (|) symbol, hence the name. Reload the template and you will see how the seconds figure always displays two digits, regardless of the value it assumes.
We have created a fully functional Pomodoro timer widget that we can reuse or embed in more complex applications. Chapter 6, Building an Application with Angular Components, will guide us through the process of embedding and nesting our components in the context of larger component trees.
In the meantime, let's add some UI beautification to make our component more appealing. We already introduced a class attribute in our button tag as an anticipation of the implementation of the Bootstrap CSS framework in our project. Let's import the actual style sheet we downloaded through npm when installing the project dependencies. Open timer.html and add this snippet at the end of the <head> element:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/CSS/bootstrap.min.CSS" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Now, let's beautify our UI by inserting a nice page header right before our component:
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<strong class="navbar-brand">My Timer</strong>
</div>
</div>
</nav>
</body>
Tweaking the component button with a Bootstrap button class will give it more personality and wrapping the whole template in a centering container will definitely compound up the UI. So let's update the template in our template to look like this:
<div class="text-center">
<img src="assets/img/timer.png" alt="Timer">
<h1> {{ minutes }}:{{ seconds | number:'2.0' }}</h1>
<p>
<button class="btn btn-danger" (click)="togglePause()">{{ buttonLabel }}</button>
</p>
</div>