Custom Pipe

Let’s convert enum values to user-friendly labels using custom pipes.

We'll cover the following...

In this lesson, we’ll implement a custom pipe in Angular. The pipe will transform the data into more user-friendly text.

Enum values

In projects, we use enum values to keep track of some multi-value fields. In this course, for example, we already used enum values to store information about the type of user account. Let’s begin by using the following enum:

enum Account {
  Premium,
  Standard,
  Trial,
}

This, then, is used to define its account type in the user type, like this:

interface User {
  name: string;
  lastname: string;
  account: Account;
}

The main problem with enums on the frontend is that there’s no way to display them automatically. ...