Custom Pipe

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.

Let’s assume that we want these descriptions displayed for different account types:

• We want to display “Premium Account” for premium user accounts.

• We want to display “Standard Account”for standard user accounts.

• We want to display “Trial Account” and his account has a 30-day trial” for trial user accounts.

To display such descriptive messages to the user, we can use a bunch of ngIf directives with the template for each account type, but that would be tedious.

Let’s think about how pipes can help us save time.

Create custom pipe

It’s helpful to think about pipes as a way to transform the input data into some output value. In this case, we want the output value to be an account-type message. In a case like this, the input data is just a user object. So, the pipe takes the user and transforms it into its account message. That’s it! Let’s take a look at the implementation of the transform function below:

transform(user: User): string {
  if(user.account === Account.Premium) return "Premium account";
  if(user.account === Account.Standard) return "";
  if(user.account === Account.Trial) return "This account is on 30-days trial";
  
  // in every other case, return the empty string
  return ""
}

For each account type, we have a separate statement with a message for each account type, which is returned from the function.

Now, let’s combine these into a pipe. First of all, we need to create a pipe class. The easiest way to do this is to use the power of Angular CLI once again.

Angular CLI provides us with a nice pipe boilerplate that includes a test file. To generate the file using Angular CLI, we use the following command:

ng generate pipe account-type

Or, we can use the shortened version, which looks like this:

ng g p account-type

Now, let’s put our transformation logic inside the transform function, like this:

@Pipe({
  name: 'accountType'
})
export class AccountTypePipe implements PipeTransform {

  transform(user: User): string {
    if(user.account === Account.Premium) return "Premium account";
    if(user.account === Account.Standard) return "";
    if(user.account === Account.Trial) return "This account is on 30-days trial";

    // In every other case, return the empty string
    return ""
  }

}

Let’s see how we use it. We have to pass user as the input argument and use the pipe name to apply it.

<p> {{ user | accountType }} </p>

The application below presents the applied pipe that is renders the sample user profile: