Understand Angular Directive with Example

    May 07, 2019       by Pankaj Kumar
angular-directive.jpg

In this article, I am going to explain about Angular Directive.

The angular directive is a function that executes whenever the Angular compiler finds it in the DOM. It is  used to extend the power of the HTML by giving it new syntax. Each directive has a name. And each directive determines where it can be used: in an element, attribute, class or comment.
 

Types of Directive

1. component

components are normal directives with templates. 

 

2. Attribute directives

An Attribute directive changes the appearance of DOM(Document Object Model) element.  These directives look like regular HTML attributes in templates.  The ngModel directive which is used for two-way is an example of an attribute directive.

We can generate attribute directive with below command over terminal:

ng g directive name_of_directive

 

Let's understand it with an example.

Create Angular app with angular CLI

ng new angular-directive

 

After successfully creating angular app, move to project folder and create a new directive with the command ng g directive warning. After that, A file will be created inside app folder. Lets's have a look the code inside it:

 

 
import { Directive } from '@angular/core';
 
@Directive({
selector: '[appWarning]'
})
export class WarningDirective {
 
constructor() { }
 
}
 

 

Now we need to add the behaviour of the directive.

 

 
import { Directive, ElementRef } from '@angular/core';
 
@Directive({
selector: '[appWarning]'
})
export class WarningDirective {
 
constructor(elr:ElementRef){
elr.nativeElement.style.background='red';
}
}
 

 

Now, we can use the directive inside our HTML component. Write the below code in an app.component.html file.

 

<p appWarning>This is warning message !!</p>

 

Lastly, Save everything and run the app with ng serve. On browser, a paragraph will show with red background.

 

3. Structural directive

It manipulates the layout by adding, removing, and replacing elements in DOM. These are specifically there to create and destroy DOM elements. The structural directives are very simple to recognize. An asterisk (*) precedes the directive attribute name. It does not require brackets or parentheses like attribute directive.

 

Let's understand it with an example.

 

 
<table class="table">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Email</td>
</tr>
</thead>
 
<tbody>
<tr *ngFor="let user of users">
<td>{{ user.first_name }}</td>
<td>{{ user.last_name }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
 

 

As we see in the above code, We have iterated a loop over users data and displayed in table. Three of the standard, built-in structural directives are NgIf, NgFor, and NgSwitch. The Directives can be written in both the UpperCamelCase and lowerCamelCase because NgIf refers to a directive class & ngIf refers to a directive’s attribute name.

  • NgSwitch: It is used whenever you want to display an element tree consisting of many children. The Angular places only selected element tree into the DOM based on some condition.

  • NgStyle: Based on the component state, dynamic styles can be set by using NgStyle. Many inline styles can be set simultaneously by binding to NgStyle.

  • NgClass: It controls the appearance of elements by adding and removing CSS classes dynamically.

 

Conclusion

In this article, we took a look at Angular directives, the core of Angular applications. We looked at the different types of directives and saw how to create custom ones that suit our requirements.

 

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

angular directive

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS