Gain insights into Angular’s built-in directives and pipes, and delve into creating custom ones. Learn about their real-world applications to boost your project's performance and code readability.

angular.tar.gz

angular

angular-fa

Directives and pipes are incredible and often undervalued features of the Angular framework. They allow us to write efficient code, improve application performance, and omit code duplications.

In this course, you will learn about the theory and the working mechanisms of built-in directives and pipes in Angular. You’ll also implement some custom directives and pipes to learn about their real-world application cases. With this course, you will improve your Angular skills and refine your project’s codebase to increase the performance and readability of your code.

Directives and Pipes in Angular

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`:


```tsx
enum Account {
  Premium,
  Standard,
  Trial,
}
```

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


```tsx
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:

```tsx
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:

```bash
ng generate pipe account-type
```

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


```bash
ng g p account-type
```

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

```tsx
@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.

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

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


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


Getting Started

Directives

Test: Built-in Directives

Attribute Directives

Test: Attribute Directives

Structural Directives

Test: Structural Directives

Create Your First Data Pipeline with a Dashboard

Advanced Techniques Using Directives

Test: Advanced Directives

Directives Summary

Pipes

Test: Pipes

Pipes summary

Build an E-book Reader in Angular With Gutendex API

Custom Pipe

Enum values