Angular 10 – Directives

Directives is a very important concept in Angular. When Angular renders a template, it transforms the DOM according to instructions specified by directives.

In fact, we can say that directives are the building blocks of Angular applications. Moreover, components discussed in the previous chapter is actually a directive.

1. What are Directives?
2. Types of Directives
3. Using Angular Directives

1. What are Directives?

Directives are functions that are executed when found in the DOM(Document Object Model) by the Angular compiler. They are used to extend the functionality of the regular HTML by adding new syntax. Remember when we created the StudentComponent, we said we could add it to the HTML template using the selector

<student-app></student-app>

Therefore, the HTML is kind of extended by this directive

Similarly, there are other directives as well, each with it’s own name. For example, there’s pre-defined directive like ng-repeat, *ng-if etc.

A directive can be use as a class, element, attribute or comment. Let’s now look at the three kinds of directive in Angular

2. Types of Directives

We’ll look at the three type of directives:

Component

Components are special kind of directive. So instead of manipulating the DOM, it comes with its own template. However, behind the scenes, components use the directive API and provide a nicer way to define them. Just to add, the @Component annotation extends the @Directive annotation with template-related features.

Attribute Directives

The attribute directive manipulate the DOM by changing it’s appearance and behaviour. They are like normal HTML attribute and can be applied to DOM elements.

An example of attribute directive is the ngModel directive. This directive can be applied to an input element to create a 1-way or 2-way data binding. For example, in the code below, the ngModel is used to set the value of the input as well as update the value when there is a change event.

<input [(ngModel)]="student.name"

Structural Directives

Structural directives are used to create and remove DOM elements. These directive modify the layout by adding, removing ore replacing elements. They normally start with the * sign.

Two key examples are the *ngIf and *ngFor.

<li *ngFor="let student of students"></li>
<app-student-detail *ngIf="selectedStudent"></app-student-detail>

In the above code,

the *ngFor is an iterative directive and displays a list of students

the *ngIf displays the StudentDetail component is the selectedStudent is assigned.

3. Using Angular Directives

It is very easy to just use existing Angular directive. Let’s take the ngClass directive for example

<p [ngClass]="{'red':false, 'green':true}">
  Sure you understand Angular Directives!
</p>

<style>
  .red{color: red}
  .green{color: green}
</style>

In the above code snipped,  the ngClass directive adds the class of green to the paragraph since. This changes the appearance of the text and not the structure. Therefore, this is an attribute directive.

Other predefined directives in Angular include ngStyle and ngClass