Translate your Angular App with Pipes

Pipes

We all know pipes, don’t we? You stuff something in on one end and (hopefully) it comes out at the other end. That’s exactly how Angular pipes work!

With one little difference: The object we put into the the pipe, gets transformed into another form, before coming out of the pipe again.

That way pipes are extremely useful if you want to transform data into nicely formatted, user friendly data. The most common example here is the date/time.

Wile a raw date like “Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)” is barley readable and ruins your layout, “April 15, 1988” does look much more appealing.

With pipes it is really easy, to format our date right before displaying it on the screen, without changing our Date variable in any way.

import { Component } from '@angular/core'
 
@Component({
  selector: 'date',
  template: ` <p>{{ date | datePipe }}</p> `,
})
export class DateComponent {
  date = new Date(1988, 3, 15) // April 15, 1988
}

Translation Service

In this tutorial we are going to create a translation-pipe, that transforms keys into the right translations at run-time.

To do that, we first need a source for our translation. For that we are going to implement a translation service.

In this example we will store the translation in a Dictionary/Map-like data structure. In a real world scenario, you could easily extend this translation service to get the translation data from your own backend or e.g. the Google Translate Api.

So how does this data structure look like?

It’s very simple. First, there is a so called TransaltionSet containing every translation in a key/value format. Furthermore it contains its own language code. It really doesn’t matter where you create this class. I prefer to create this small classes right inside the services file.

export class TranslationSet {
  public languange: string
  public values: { [key: string]: string } = {}
}

As mentioned above, the translation service is working on a key/value basis. You give in any key and the service will return a string for the given language (if available).

Because of that, it is not only a translation service, but a dictionary for user-strings. That way, all strings showed to the user, are managed in one central place, or fetched from a server at runtime.

Next, we need to add the service itself as an @Injectable.

@Injectable()
export class TranslationService {
  public languages = ['ger', 'eng']
 
  public language = 'ger'
 
  private dictionary: { [key: string]: TranslationSet } = {
    ger: {
      languange: 'ger',
      values: {
        example: 'Beispiel',
      },
    },
    eng: {
      languange: 'eng',
      values: {
        example: 'Example',
      },
    },
  }
 
  constructor() {}
 
  translate(key: string): string {
    if (this.dictionary[this.language] != null) {
      return this.dictionary[this.language].values[value]
    }
  }
}

As you can see, the service has two public properties.

The first —languages— is a list of all available languages, which is useful, e.g. to create a drop-down for the user to choose the language.

The second one, language, is the currently selected language.

Of course there is also a variable called dictionary, containing TranslationSets in key/value format. I have filled the dictionary with some example data for the word ‘example’, which means ‘Beispiel’ in German. Of course you can replace it by your own data later.

The service also contains a method called translate. It is later called by the pipe to get the translation for a specific key. It always uses the language specified in the ‘language’-variable of the service, to lookup the translation. That’s it. Now we have written our custom translation service.

Let’s go ahead and write the pipe.

Translation Pipe

The pipe is quite easy to implement, as we already have our translation service in place.

The only thing we have to do now, is call the translate method of the service.

But firsts things first.

Before we begin, we need to create a new file called ‘translate.pipe.ts’.

The general structure of the pipe follows the pipe shown at the beginning: Pipes are marked by the pipe-decorator. To use this decorator, you need to import Pipe from ‘@angular/core’.

Because we will need it later, we import PipeTransform, as well.

import { TranslationService } from './translation.service'
import { Pipe, PipeTransform } from '@angular/core'

Next, we create and export a new class called ‘TranslatePipe’ that implements PipeTransform. Afterwards we decorate it with the pipe decorator, containing it’s name and a purity flag.

@Pipe({
  name: 'translate',
  pure: false,
})
export class TranslatePipe implements PipeTransform {
  constructor(private translationService: TranslationService) {}
 
  transform(value: any, args?: any): any {
    return this.translationService.translate(value)
  }
}

In the constructor, we request an instance of our TranslationService via dependency injection. In the transform method of the pipe, we then call the translate method of the service, to transform the input to the translation. As we don’t have any additional arguments, we can ignore the args parameter.

Pure and Impure Pipes

There a two different types of pipes in angular.

The pure and the impure.

A pure pipe is only re-transforming the value, if the value actually changes. That makes a pure pipes really fast and efficient.

At the other hand there are the impure pipes. Impure pipes re-transform their value at every change detection cycle of the component.

Dependent of the component, that you use your pipe on, this can be multiple times per second. This can result in major performance problems, if you use impure pipes unconscious about that issue.

Also make sure, that you don’t make any request to your, or other people’s server inside of impure pipes, as it can result in hundreds of unnecessary requests. If you rely on server data for your impure pipe, make sure to cache your data, to avoid to many request.

Another option would be, to not use pipes at all, as they are no silver bullets for everything.

 @Pipe({
  name: 'translate',
  pure: false
})