Angular is a great framework that comes with a variety of good things such as “routing”, “cli” and some good built-in Pipes to get you started. Although those are enough to get your project off the ground, often times you’ll encounter scenarios where you’ll have to get your hands dirty and plug your custom use cases on top of what the Angular framework provides.

One such use case I had recently, while working on the audiobooks portal Audiobooke.com, was the ability to take a raw timestamp of seconds from the database and visualize it inside an Angular component’s template, in a “human friendly” way (in other words display a value of “60” as “1 minute” or 3665 as “1 hour 1 minute 5 seconds”, etc).

Here are the steps I did to create a custom Angular pipe to visualize timestamps in a human friendly format:

Install the dependency that does the heavy lifting

npm install --save pretty-ms

This will install a library that does a pretty good job of transforming timestamps to human-friendly labels in vanilla JavaScript. No need to reinvent the wheel here.

Create a custom pipe

Now we create a new Angular pipe that we can reuse inside templates.

import {Pipe, PipeTransform} from '@angular/core';
import * as prettyMs from 'pretty-ms';

@Pipe({
  name: 'secondsHumanFriendly',
})
export class HumanFriendlySecondsPipe implements PipeTransform {

  transform(seconds: any) {
    return prettyMs(seconds * 1000);
  }
}

Import the pipe into your AppModule

We are assuming that your app consists of just one NgModule. This is rarely true for a production app, so make sure to include the pipe into the correct module where it will be needed. Note that if you want to reuse the Pipe into multiple modules at once, you need to wrap it into its own NgModule and import the new NgModule instead. The example below illustrates exactly this “production ready” use case.

// human-friendly-seconds.module.ts

@NgModule({
  declarations: [
    HumanFriendlySecondsPipe
  ],
  providers: [],
  exports: [
    HumanFriendlySecondsPipe
  ]
})

export class HumanFriendlySecondsModule {

}

// app.module.ts
@NgModule({
  declarations: [
    // Your real components go here
    AppComponent,
  ],
  imports: [
    // We include the above HumanFriendlySecondsModule module
    // as a reusable dependency here, so we can take advantage of its
    // exported Pipes
    HumanFriendlySecondsModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Examples

Let’s give our code a test drive. Go into the template of your AppComponent or whichever component you want to visualize a timestamp in. Inside it’s template, we try the following examples:

{{60 | secondsHumanFriendly}}<br/>
{{3600 | secondsHumanFriendly}}<br/>
{{3663 | secondsHumanFriendly}}<br/>
{{999999 | secondsHumanFriendly}}<br/>

The results are:

1m
1h
1h 1m 3s
11d 13h 46m 39s

Happy coding!