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

# Basic notation and usage

Pipes are classes marked by the `@Pipe` decorator, just like directives have the `@Directive` decorator on top of their class.

Here's an example:

```tsx
@Pipe({
  name: 'myPipe',
})
export class MyPipe {
...
} 
```

Pipes need to be declared in a module that uses these pipes. So, we need to remember to add these into the declaration field of our 
 `NgModule`:

```tsx
@NgModule({
  declarations: [
    MyPipe
  ]
})
export class MyModule {
}
```

Pipes usually contain logic that works for the entire application Therefore, it usually makes sense to declare them in the shared module of our Angular application.

# How pipes function

Similar to directives, pipes don’t always work the same way. The logic implemented in each pipe varies, but there’s a pattern they all follow.

The essential part is the function in the pipe, which ultimately does all the transformation and generates the output. Let's look at this example of a simple pipe below:


```tsx
@Pipe({
  name: 'inBrackets',
})
export class BracketsPipe implements PipeTransform {
	transform(value: string): string{
		return '(' + value + ')'; 
	}	
} 
```

The example presents a pipe that wraps the text value in brackets. So, for instance, when we have a value of `100` and want to wrap it in brackets like this, `(100)`, we can use this simple pipe.

The key observation here is that pipes have to implement the `PipeTransform` interface, which causes the `transform` function to be implemented. This is very important because Angular calls this function during runtime to transform data and generate the desired output.


# The `Transform` function

The function `transform` is a simple function of the pipe’s class. This function must have at least one argument, the input data, and must return a value after the transformation, like this: 

Let's learn about the basic syntax and features of 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

How Pipes Work

Basic notation and usage

How pipes function