Directives in angular are classes that are used to change the behavior or style of HTML DOM elements. We can manage what users see on UI like forms, lists, styles, etc with the help of built-in directives provided by angular.
Types of directives:
The different types of directives provided by angular are:
1) Component Directives:
Component directives are directives with a template. This is the most common type of directive. As components in angular are building blocks of angular and component itself is a directive. So, whenever we use components in angular, we use component directives. Component directives are decorated with @Component decorator.
2) Attribute Directives:
Attribute directives are directives that change the appearance or behaviour of an element, component or another directive. Attribute directives are used to set conditions on HTML elements. By setting conditions on HTML elements using attribute directives conditions we can show or hide the elements.
Angular provides built-in attribute directives which we can use. Following are the built-in attribute directives provided by angular.
a) NgClass:
NgClass directive is used to add or remove multiple CSS classes. By using NgClass directive we can change the style of an element
whenever a certain property is changed dynamically.
Example:
Put following CSS classes in components relative .css file.
.btn {
padding: 10px;
border-radius: 5px;
}
.btn-primary {
background: blue;
color: white;
border: 1px solid blue;
}
.btn-warning {
background: #c6c609;
color: white;
border: 1px solid #c6c609;
}
.btn-danger {
background: #ca4141;
color: white;
border: 1px solid #ca4141;
}Put following code in components relative .html file to set classes using ngClass.
<button [ngClass]="'btn btn-primary'">Submit</button>
<button [ngClass]="['btn', 'btn-danger']">Delete</button>
<button [ngClass]="{'btn btn-warning': username === 'John'}">Cancel</button>For more detailed information about *ngClass in angular, refer to the following article:
b) NgStyle:
NgStyle directive is used to add or remove multiple HTML styles (CSS properties). NgStyle directive helps to add or remove
multiple CSS properties at once based on condition.
Example:
Put following code in components relative .html file to set styles using ngStyle.
<h1 [ngStyle]="{'background-color': 'black', 'color': 'white'}">Text with black background and white text color.</h1>You can also set styles using ngStyle based on certain conditions.
For more detailed information about *ngStyle in angular, refer to the following article:
c) NgModel:
NgModel directive is used to add two-way data binding to HTML form elements.
Example:
Create two variables into a components .ts file.
fullname = '';
email = '';Use two-way binding into template ie. HTML file.
<h1><u>Two way binding:</u></h1>
<h2>
Enter your Name:
<input type="text" [(ngModel)]="fullname">
</h2>
<h2>
Enter your Email:
<input type="email" [(ngModel)]="email">
</h2>
<hr>
<h2><u>User Info:</u></h2>
<h3>Name: {{fullname}}</h3>
<h3>Email: {{email}}</h3>For more detailed information about *ngFor in angular, refer to the following article:
Two-way data binding in angular
3) Structural Directives:
Structural directives are used to change the structure of DOM. Structural directives work by adding and removing DOM elements. Angular provides built-in structural directives which we can use. Following are the built-in structural directives provided by angular.
a) NgIf:
NgIf directive is used to show or remove elements and it’s inner elements by checking property values like true or false. If the value of
a property is true then NgIf shows the elements on DOM. If the value of a property is false then the element is removed from
DOM. NgIf directive is used on elements by binding *ngIf to condition.
Example:
Create a variable in the .ts file and assign a boolean value (true or false) to it.
showElement = false;Add *ngIf condition in the .html file to show or hide a particular element.
<h1 *ngIf="showElement">Display this only if showElement property value is true.</h1>The above h1 tag will not get shown if you set the value of showElement as false.
For more detailed information about *ngIf in angular, refer to the following article:
b) NgFor:
NgFor directive is used to display lists of items using a looping mechanism. NgFor is used on elements by binding looping
mechanism syntax to *ngFor.
Example:
If you want to loop over an array of users, then the following code needs to add in the .html and .ts file
Add the following code in the .ts file. Initialize one variable called as users and put values of different users in that array.
users = ['John', 'Jane', 'Oliver', 'Bruce'];Add following code in .html file related to .ts file to loop over users array.
<div *ngFor="let user of users">
<p>{{user}}</p>
</div>For more detailed information about *ngFor in angular, refer to the following article:
c) NgSwitch:
NgSwitch displays one element from many different elements based on switch conditions. NgSwitch is similar to the JavaScript
switch statement.
Example:
Assume you want to show the class of students based on their percentages, then you can use *ngSwich.
Create an array of objects in the .ts file and add name and percentage properties.
students = [
{
"name": "John",
"percentage": 70
},
{
"name": "Jane",
"percentage": 63
},
{
"name": "Mike",
"percentage": 56
},
{
"name": "Sam",
"percentage": 64
},
{
"name": "Tom",
"percentage": 38
}
];Add *ngSwich in the .html file to show the class of students based on their percentages.
<ul *ngFor="let student of students">
<li *ngIf="student.percentage >= 65">
{{ student.name }} : 'Distinction'
</li>
<li *ngIf="student.percentage < 65 && student.percentage >= 60">
{{ student.name }} : 'First Class'
</li>
<li *ngIf="student.percentage < 60 && student.percentage >= 55">
{{ student.name }} : 'Second Class'
</li>
<li *ngIf="student.percentage < 55 && student.percentage >= 40">
{{ student.name }} : 'Pass'
</li>
<li *ngIf="student.percentage < 40">
{{ student.name }} : 'Fail'
</li>
</ul>Related Articles:
To see detailed information and output about each directive mentioned above, refer to the below articles:
Two-way data binding in angular
If you have any questions related to the article, you can ask them through the comment section below.
