Introduction To Directives

What are directives?

Directives are classes that extend the default behavior of any element in the Angular application. We can think of them as features that let us apply extra logic without tying it to a specific place within the application. Directives are like highly reusable code that we can use anywhere we need to. There are three types of directives in Angular:

• Components are directives used to specify HTML templates.
• Attribute directives change the appearance or behavior of any element in Angular. For instance, attribute directives can highlight specific words in the text of the application.
• Structural directives change the DOM layout during the runtime by adding or removing DOM nodes. For instance, a ngIf directive is a structural one.

We can divide directives into two main categories called built-in and custom.

Built-in directives

Built-in directives, as their name suggests, are already built into an application. They’re responsible for the core features of every application. Some examples of these built-in directives are as follows:

• The *ngIf directive is used for conditional rendering and looks like this:

  <h1 *ngIf="active">Hello</h1>
  

• The *ngFor directive is used for rendering multiple elements and looks like this:

  <ul>
  	<li *ngFor="let user of users">
          {{ user.name }}
      </li>
  </ul>
  

• The ngModel directive is used for property binding and looks like this:

  <input [(ngModel)]="user.name" />
  

Let’s think about how often we use built-in directives—probably very often! Such directives appear very straightforward, but they have a lot of additional hidden features, which we’ll learn more about later.

Custom directives

Custom directives are the directives we can create ourselves and change to suit our needs. If we think built-in directives are handy, these customizable directives provide us with even more possibilities! With custom directives, we can extend the base features to align with the needs of our project or implement completely new ideas in a highly reusable way.

We’ll discuss more specific examples in detail in the coming lessons. However, right now, let’s look at a couple of examples to give us an idea of what directives can do.

Let’s consider a directive that wraps content into a different layout, like the one below:

<p withEmoji="🥳"> Here is some text </p>

The result would look like this:

Or, we may want to create a custom ngIf after realizing there are a lot of the same conditions in a project.

<ul>
    <li *ngFor="let number of [1,2,3,4,5]">
        <p *onlyOddNumber="number">
            {{number}}
        </p>
    </li>
</ul>

The result would look like this:

These are just a couple of ways we can use directives. The possibilities are endless!

Summary

Directives are an essential part of the Angular framework, and we use them regularly—even when we may not be aware of the fact! Angular provides several built-in directives that we can use to speed up development. To suit any special needs, we can create our own custom directives to do whatever we wish. We’ll learn about those very soon! For now, let’s remember the three types of directives which are components, attribute directives, and structural directives.