Change Detection Technique And Directives In Angular

Introduction

 

In this article, we are going to explore how Angular detects changes and updates the application at the corresponding places. Also we are going to discuss about directives in Angular.

 

Overview

 

Angular applications have an improved change detection mechanism. 

 

What is Change Detection Mechanism ?

 

Change Detection is a process in Angular which keeps views in sync with the models. In Angular, the flow is unidirectional from top to bottom in a component tree. A change in a web application can be caused by events, Ajax calls and Timers which are all asynchronous.

 

Who informs Angular about the changes? 

 

Zones inform Angular about the changes in the application. It automatically detects all asynchronous actions at run time in the application. 

 

What does Angular do once a change is detected ?

• Angular runs a change detector algorithm on each component from top to bottom in the component tree. This change detector algorithm is automatically generated at run time which will check and update the changes at appropriate places in the component tree. 
• Angular is very fast though it goes through all components from top to bottom for every single event as it generates VM friendly code. Due to this, Angular can perform hundreds of thousands of checks in few milliseconds.

What are directives ?

 

Directives are used to change the behavior of components or elements. We can use directives in the form of HTML attributes. We create directives using classes attached with @Directive decorator which adds metadata to the class. 

 

Why Directives?

• Directives modify the DOM elements .
• Directives can be used to create custom elements to implement the required functionality.
• Directives can also be used create reusable and independent code.

Types of Directives

 

There are three types of directives present in Angular.

• Components
• Structural directives
• Attribute directives

Lets discuss each one of them,

 

Components

• Components are directives with a template or view.
• @Component decorator is actually @Directive with templates .

Structural Directives

 

A Structural directive changes the DOM layout by adding and removing DOM elements.

 

*directive-name = expression

 

Built-in structural directives,

1. ngif
2. ngfor
3. ngswitch

ngif

 

ngIf directive renders components or elements conditionally based on whether or not an expression is true or false. ngIf directive removes the element from the DOM tree.

 

Syntax

 

*ngIf = "expression"

 

ngfor

 

ngFor directive is used to iterate over collection of data i.e., arrays.

 

Syntax

 

*ngFor = "expression"

 

ngswitch

 

With NgSwitch we evaluate the expression only once and then choose the element to display based on the outcome.

 

Attribute Directives

 

Attribute directives changes the appearance / behavior of a component / element. Below are the built in attribute directives,

1. ngstyle
2. ngclass

ngstyle

 

This directive is used to modify a component/element’s style. We can use the following syntax to set a single CSS style to the element which is also known as style binding.  

Syntax

 

[style.<cssproperty>] = "value"

 

ngclass

 

It allows us to dynamically set and change the CSS classes for a given DOM element. We can use the following syntax to set single css class to the element which is also known as class binding.

 

Syntax

 

[class.<css_class_name>] = "property/value"

 

Observation

 

Here, we have discussed about the types of directives and the syntax, so in the next article- we are going to explore the concept with the help of examples.

 

Summary

 

In this article, we explored how Angular detects the changes and updates it in the application at respective places. Also we discussed about directives in Angular. Hope you like the article. Until next time- Happy Reading Cheers