Custom Pipe
Explore how to build a custom Angular pipe that converts enum values for user accounts into clear, user-friendly descriptions. Understand the pipe's transformation function, create it using Angular CLI, and apply it to streamline UI code and enhance data presentation.
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 ...