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

Let's highlight the most important things we need to remember about structural directives.

# Generate file

To generate the directive file using **Angular CLI**, we use the following command which is the same as an attribute directive:

```bash
ng generate directive app-custom-directive
```

# Directive syntax

The empty directive class looks like this and is the same as an attribute directive:
```tsx
@Directive({
  selector: '[appCustomDirective]'
})
export class CustomDirective {
  constructor() { }
}
```

# Asterisk syntax `*`

We use the asterisk symbol as a prefix if we need to mark a directive as structural in Angular. Doing so makes sure that Angular can use the element as a template instead of rendering it directly, like so:

```tsx
<div *yourDirective> </div>
```

# The `TemplatRef` and `ViewContainerRef` classes

We can inject `TemplateRef` and `ViewContainerRef` to gain the ability to manipulate the view, like this:

```tsx
	constructor(
		private templateRef: TemplateRef<any>,
		private viewContainerRef: ViewContainerRef,
	){}
```

# Render elements

We use `TemplateRef` and `ViewContainerRef` to render the element based on the template in the view. The rendered element or view is placed in the view container.

```tsx
this.viewContainerRef.createEmbeddedView(this.templateRef);
```

# Clear the view

To clear the view container and remove all added nodes, we call the `clear` function on `ViewContainerRef`.

```tsx
this.viewContainerRef.clear();
```

# Other techniques

Techniques such as the `Input` and `Output` properties let us bind and pass the data,  just like with attribute directives, and can be called when needed.


Let’s recap what we’ve learned about structural directives.

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