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

Pipes are less complicated than the directives but equally important in the Angular framework. Depending on the context, we may benefit from both directives and the pipes. There are cases when it’s crucial to combine them to create the perfect solution.

In this lesson, we’ll quickly go through everything we learned about pipes. As usual, this summary can act as a cheat sheet with many useful snippets that help us remember key features.

# Pipes

Pipes are simply functions dedicated to transforming values. They’re commonly used in templates.

**Advantages**:

- Pipes provide a way to unify output values across the entire application so that they’re displayed to the user in the same way.
- The transformation logic is encapsulated into a single file and then reused in various places.
- By default, pipes run transformation logic only when input data changes, making the concept highly performant.


# Built-in pipes

Angular provides us with a set of valuable pipes that represent the most common use cases in most applications. We have learned the following:

- The `DatePipe` transforms Date object to a user-friendly format.
- The `UpperCasePipe` transforms all text to uppercase.
- The `LowerCasePipe` transforms all text to lowercase.
- The `CurrencyPipe` transforms a number into a currency value with a currency symbol. It also provides special formatting for digits.


## The `DatePipe`

We use the following simple syntax to get the default date format, like this:

```html
 {{ dateObject | date }} 
```

Or, we can specify the format we want by using additional parameters, like these:

```html
 {{ dateObject | date:'d/M/yy, h:mm a' }} 
```

## The `UpperCasePipe` and `LowerCasePipe`

We can use the following syntax to transform the text into the desired case:

```html
 {{ 'Lorem Ipsum' | lowercase }} 

 {{ 'Lorem Ipsum' | uppercase }} 
```

## The `CurrencyPipe`

We can use the following syntax to display a number value formatted as currency:

```html
 {{ 15,99 | currency:'USD' }} 

 {{ 15,99 | currency:'EUR' }} 
```

# Chain of pipes

We can create a complex transformation using multiple pipes. We do this by putting them one after another in a chain.

The following code represents the combination of the `date` and `uppercase` pipes, which display the date in a specific format that includes uppercase letters. 




```html
 {{ dateObject | date | uppercase }} 
```

# Custom pipe

When there are no built-in pipes that work for us, we can create custom pipes. The single most crucial thing is to implement a transformation function and use it in our pipe.

When we are designing our function, we need to consider two key things:

- An input arguments is the data we want to transform.
- An output value is the value after the transformation.


The following syntax presents a simple custom pipe that returns a string based on the number:

```tsx
@Pipe({
 name: 'weight'
})
export class WeightPipe implements PipeTransform {

 transform(value: number): string {
 if(value >= 50) return "heavy";
		if(value < 50) return "light";
 }

}
```

The transformation function receives input data as arguments of the `transform` function and returns an output.

To use the pipe, we have to apply it using its name, like this:

```html
 {{ 60 | weight }} 

 {{ 15 | weight }} 
```

# The `AsyncPipe` pipe

The `AsyncPipe` helps us when we deal with `Observables` in components. Usually, we don’t need the data in the component’s class but we do need it in the template. For such cases, we strongly recommend using `AsyncPipe`. This keeps the component’s class code readable and safe from possible memory leaks when working with subscriptions.

Using it with the `NgIf` directive is recommended so that there’s only a single subscription per entire template. The following syntax presents how to use the `NgIf` directive with `user$` as `Observable` data:


```html
<ng-container *ngIf="user$ | async as user">
	 {{ user.name }} 
	 {{ user.lastname }} 
</ng-container>
```

---

That’s all there is to pipes! We hope you enjoyed learning about them and are ready to put them to good use them while working on projects in Angular.

# Built-in pipes

Angular provides us with a set of valuable pipes that represent the most common use cases in most applications. We have learned the following:

- The `DatePipe` transforms Date object to a user-friendly format.
- The `UpperCasePipe` transforms all text to uppercase.
- The `LowerCasePipe` transforms all text to lowercase.
- The `CurrencyPipe` transforms a number into a currency value with a currency symbol. It also provides special formatting for digits.


## The `DatePipe`

We use the following simple syntax to get the default date format, like this:

```html
 {{ dateObject | date }} 
```

Or, we can specify the format we want by using additional parameters, like these:

```html
 {{ dateObject | date:'d/M/yy, h:mm a' }} 
```

## The `UpperCasePipe` and `LowerCasePipe`

We can use the following syntax to transform the text into the desired case:

```html
 {{ 'Lorem Ipsum' | lowercase }} 

 {{ 'Lorem Ipsum' | uppercase }} 
```

## The `CurrencyPipe`

We can use the following syntax to display a number value formatted as currency:

```html
 {{ 15,99 | currency:'USD' }} 

 {{ 15,99 | currency:'EUR' }} 
```

# Chain of pipes

We can create a complex transformation using multiple pipes. We do this by putting them one after another in a chain.

The following code represents the combination of the `date` and `uppercase` pipes, which display the date in a specific format that includes uppercase letters. 




```html
 {{ dateObject | date | uppercase }} 
```

# Custom pipe

When there are no built-in pipes that work for us, we can create custom pipes. The single most crucial thing is to implement a transformation function and use it in our pipe.

When we are designing our function, we need to consider two key things:

- An input arguments is the data we want to transform.
- An output value is the value after the transformation.


The following syntax presents a simple custom pipe that returns a string based on the number:

```tsx
@Pipe({
 name: 'weight'
})
export class WeightPipe implements PipeTransform {

 transform(value: number): string {
 if(value >= 50) return "heavy";
		if(value < 50) return "light";
 }

}
```

The transformation function receives input data as arguments of the `transform` function and returns an output.

To use the pipe, we have to apply it using its name, like this:

```html
 {{ 60 | weight }} 

 {{ 15 | weight }} 
```

# The `AsyncPipe` pipe

The `AsyncPipe` helps us when we deal with `Observables` in components. Usually, we don’t need the data in the component’s class but we do need it in the template. For such cases, we strongly recommend using `AsyncPipe`. This keeps the component’s class code readable and safe from possible memory leaks when working with subscriptions.

Using it with the `NgIf` directive is recommended so that there’s only a single subscription per entire template. The following syntax presents how to use the `NgIf` directive with `user＄` as `Observable` data:


```html
<ng-container *ngIf="user$ | async as user">
	 {{ user.name }} 
	 {{ user.lastname }} 
</ng-container>
```

---

That’s all there is to pipes! We hope you enjoyed learning about them and are ready to put them to good use them while working on projects in Angular.

Let’s summarize our knowledge about pipes in Angular.


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

Summary