Angular Directives
In this topic we will look into angular directives and you can check our previous topic on Data Binding in angular application.
What are Angular Directives?
Angular Directives are the elements which are basically used to change the behavior's or appearance of DOM(Document Object Model) element, Or you can say that directives are basically use to extend the power of HTML attributes and to change the appearance and behavior of DOM element.
Types of Directives ➤➤
There are three types of directives based on behavior:
1. Structural Directives ⮚
Structural Directives will shape the HTML view by adding or removing the element from DOM.
There are three structural directives available:
i. NgFor (*ngFor) 🠞
ngFor is built-in directive and belongs to structural directives. It is similar to for loop used in many programing language like java. So ngFor directive is used to iterate over collection.
The Syntax used for ngFor = *ngFor=”let <value> of <collection>”
Value = property Name.
Collection = property of your component which is collection.
ngFor ⮞ Local Variable
ngFor has following local variable which we can use to customize our data.
a. Index : provide index position to current element while iteration.
b. First : It returns Boolean true if the current element is the first element in the iteration else it will return false.
c. Last : It returns Boolean true if the current element is the last element in the iteration else it will return false.
d. Even : It returns Boolean true if the current element is even element based on the index position in the iteration else it will return false.
e. Odd : It returns Boolean true if the current element is an odd element based on the index position in the iteration else it will return false.
Simple example as shown below:
ngIf is an Angular Structural directive which allow us to add or remove DOM element based on some condition. It works on the basis of Boolean true or false result of a given expression.
Syntax : *ngIf = "expression"
Like other programing language we have else condition in angular. The ngIf allow us to define optional else block using the ng-template.
Syntax : *ngIf = "expression; else else-block"
Example below : 
The ngSwitch is an structural directive which allow us to add or remove DOM element. It works in combination with ngSwitchCase & ngSwitchDefault directive.
Syntax:
<container_element [ngSwitch]="switch_expression">
<inner_element *ngSwitchCase="match_expresson_1">...</inner_element>
<inner_element *ngSwitchCase="match_expresson_2">...</inner_element>
<inner_element *ngSwitchDefault>...</element>
</container_element>
Example show below :
➤ ngSwitch is bound to container_element like div as shown in example, we assign a switch-expression to the ngSwitch via property Binding syntax. Angular evaluates the switch expression at runtime and based on its value display or removes element from DOM.
➤ ngSwitch is bound to container_element like div as shown in example, we assign a switch-expression to the ngSwitch via property Binding syntax. Angular evaluates the switch expression at runtime and based on its value display or removes element from DOM.
➤ ngSwitchCase is bound to inner_element which we place inside container_element and we assign a match_expression which angular evaluates at runtime. The Angular displays the inner_element only when value of match_expression matches the value of switch_expression else it is removed from the DOM.
➤ ngSwitchDefault is also bound to inner_element. It does not have any match expression, if none of the expression matches then angular use it as default value.
2. Attribute Directives ⮚
Attribute Directive are used to modify the behavior or appearance of DOM element or the component.
There are two in-built directives.
i. ngStyle ⮚
ngStyle is used to set inline style of HTML element using expression. In Other word you can say the ngStyle directives basically used to modify element appearance or behavior.
Syntax : <element [ngStyle]="{'styleNames': styleExp}">...</element>
Example Below :
ngClass directives allow us to add CSS classes to an HTML element, or you can say that ngClass is basically used to change the class attribute of the element in the DOM or in the component to which it is attached.
3. Component Directives ⮚
The Component is also a directives in angular with its own template, style and logic for the view. We already discussed component in previous topic.
Comments
Post a Comment