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 chapter, we’ll focus on **structural directives**. The main difference between structural and attribute directives is that _structural directives change the actual_ DOM structure, _while attribute directives just change the appearance of existing DOM elements_.

Structural directives define the DOM structure by simply adding or removing elements in the DOM. This is very important to understand because structural directives receive a template that seems to be an actual DOM element. But, as a matter of fact, it’s not a DOM element at all. It’s just a virtual template. The directive uses this template to create a view which is then pushed to the DOM.

In this lesson, we focus more on theory so that we can learn the basics. In the next lesson, we focus on actual implementation. It’s crucial to understand the fundamentals because they allow us to think about templates and elements from a new perspective.
 
Later, we’ll learn the difference between an actual **element**, an Angular **template**, and a **view**. This will be helpful when we implement custom structural directives.


# Introduction to templates and views

When we worked with attribute directives in the last lesson, we learned about a useful technique where we get an instance of `ElementRef` in our directive that pointsto an actual element in the DOM.

When working with structural directives, we need to think differently. This is because, in this case, **there is no element**. _How is that possible?_


## Templates

Let's learn about template usage with the `NgIf` directive. Let’s begin by looking at how `*ngIf` is applied to an element below:


```html
<div *ngIf="true"> Hi, I'm visible </div>
```

Angular doesn’t render this `<div>` element by default. Instead, it uses `<div>`  as a template. We’ll learn how Angular does this later in the course.

What does it mean that Angular uses it as a template? It means that the following element is not added to the DOM by default:

```html
<div> Hi, I'm visible </div>
```

Instead, this element is stored as a template so it can initiate embedded views later. In this example, it’s initiated when the `NgIf` statement is `true`.


To access the stored template, we use a `TemplateRef` instance. Whenever we apply a directive to the `ng-template` element, we get access to that element through `TemplateRef`.



Let’s learn the fundamentals of 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

Introduction to Structural Directives