Creating Directives and Implementing Change Detection

In this chapter, we will learn and understand all about Angular Directives and change detection.

We will learn about different types of directives provided by Angular and also create some custom user-defined directives. We will deep dive into learning how Angular handles the change detection and how we can utilize change detection in our apps.

At the end of this chapter, you will be able to do the following things:

• Understand Angular Directives
• Understand and implement built-in Component Directives
• Understand and implement built-in Structural Directives
• Understand and implement built-in Attribute Directives
• Create custom-defined Attribute Directives
• Understand how change detection works in Angular

Angular Directives

Directives allows us to extend the behavior of the elements. We can manipulate the Document Object Model (DOM) of a HTML page using the different types of directive definitions.

Angular uses the @Directive metadata to tell the application about the type of directives they have and the functional capabilities defined with each directive.

The following diagram shows the different types of directives:

There are mainly three types of Angular Directives:

• Component Directives: We can define these as user-defined directives, similar to custom directives in Angular 1.x
• Structural Directives: Directives that alter or transform the DOM elements (one or more) on the fly
• Attribute Directives: Directives that extend the behavior or look and feel of an element

In Angular 1.x, we had the A (Attribute), E (Element), C (Class), M (Matches comment) directives.

Angular comes...

Component Directives

Component Directives are user-defined directives to extend the functionality and create small reusable functionalities.

Think of Component Directives as directives that have a template attached to them since Components Directives have their own view or template defined with them.

In previous chapters, we have created many components. If you have mastered the art of creating components and using them in our layouts, you will already know how to create Component Directives.

A quick recap on Angular components: components are small reusable pieces of code that we can use in throughout our applications.

In the following code snippet, we will see the basic syntax of the component. Create a file named my-template.component.ts:

import {Component} from "@angular/core";

@Component({
 selector: 'my-app',
 template: `<h2>{{ title }}</h2>...

Structural Directives

As the name mentions, Structural Directives alter the DOM structure by adding, appending, or removing DOM elements on the fly.

Angular Structural Directives are displayed with an (*) asterisk symbol before the directive name.

Some of the commonly used Structural Directives are as follows:

• ngFor: Repeater directive generally used to loop through and display a list of elements.
• ngIf: Shows or hides DOM elements depending on the result of expression evaluation; the result is either true or false.
• ngSwitch: Returns if the match expression value matches the value of the switch expression. The result returned can be any value; a conditional check is done for matching values.

Only one Structural Directive is allowed per element.

Let's learn about each of these Structural Directives in detail and create few examples using them:

...

Attribute Directives

Attribute Directives extend the behavior or the look and feel of a given element. Attribute Directives are very similar to HTML attributes defined along with the element.

Attribute Directives can be of two types:

• Built-in Attribute Directive
• Custom or user-defined Attributes Directive

Let's now look at them in detail in the following sections.

Built-in Attribute Directives

As mentioned before, attributes are properties of the elements in the page. Some of the examples of the attributes for HTML elements are class, style, and so on.

Similarly Angular provides several built-in Attribute Directives. The directives include ngModel, ngClass, ngStyle, and so on.

Let's learn about each of these Attribute...

Implementing change detection in Angular

Change detection is the process of detecting any internal state changes in a model or component class and then reflect them back to the view, mainly by manipulating DOM.

Change detection is one of the most important changes from Angular 1.x to 2.

The application state changes happen either from model to view or vice versa. To understand better, take a look at the following diagram:

Application state changes can happen in two ways:

• From Model to View Template (DOM)
• From View (DOM) to Model (Component Class)

Now that we know that state changes happen either in a model or in DOM, let's analyze what triggers change detection.

Change detection is triggered by the following:

• JavaScript events (click, mouseover, keyup, and so on)
• setTimeout() and setInterval()
• Asynchronous requests

Note that all the preceding three listed ways are async...

Summary

In this chapter, we learned about directives and also about different types of directives, namely Component Directives, Structural Directives, and Attribute Directives.

We implemented custom user-defined directives to understand how we can extend directives and use them more effectively.

We learned briefly about ZoneJS, and how zones can help us to handle the async tasks in modern applications frameworks.

Finally, we learned how Angular handles changes detection and how we can use change detection methods to improve the overall application performance.

In the next chapter, we will learn about asynchronous programming using Observables. In this chapter, we will learn how to take advantage of asynchronous programming with Angular by using Observable and Promises.

In addition, we will learn how to built a basic, yet extensible asynchronous JSON API for querying the Marvel...