Leverage Turing Intelligence capabilities to integrate AI into your operations, enhance automation, and optimize cloud migration for scalable impact.
Advance foundation model research and improve LLM reasoning, coding, and multimodal capabilities with Turing AGI Advancement.
Access a global network of elite AI professionals through Turing Jobs—vetted experts ready to accelerate your AI initiatives.
FOR DEVELOPERS
AngularJS Directive: Quick Reference in Custom Directives
Angularjs directives are classes that are responsible for adding required behavior to the elements in your application. It offers a complete set of directives to manage forms, styles, lists, and all that the users view on their screen in an application. They can be reused when you need to inject a common code required across different web applications.
Apart from this set of directives, you are open to creating directives on your own which we refer to as custom directives. It can also be used to inject code into your Angular application.
Table of Contents
- 1. What is a directive?
- 2. Categories of a directive
- 2.1. Attribute directive
- 2.2. Structural directives
- 2.3. Components
- 3. What is a custom directive?
- 4. How does a custom directive work?
- 5. Prerequisite understanding for writing a directive
- 5.1. Matching directives
- 5.2. Normalization
- 5.3. Types of directives
- 6. Creating a custom directive
- 7. Conclusion
What is a directive?
AngularJS directives are the extended HTML attributes that start with ng-. It initializes application data and binds the value of HTML controls to application data. Talking about them on a higher level, they are also markers on a DOM element. They convey a specified behavior to that DOM element or even make a transformation to the DOM element and its children with the help of AngularJS’s HTML compiler. In other words, a directive runs when DOM is complied with by the AngularJS’s HTML compiler.
There is a set of pre-built directives in AngularJS like ngBind, ngModel, ngClass, and others. They help you get started quickly while using the framework. However, you are not bound to use directives from the provided set. AngularJS offers the flexibility to create your own directives just like it lets you create controllers and services that allow you to encapsulate and simplify DOM manipulation. It is referred to as a custom directive.
Check out the example given below to understand how the ng-app directive is used to define a default AngularJS application.
<html>
<head>
<title>AngularJS Directives</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body style="text-align:center">
<h2 style = "color:green">Thewhitesnow</h2>
<div ng-app="" ng-init="name='Thewhitesnow'">
<p>{{ name }} is your escape to winters.</p>
</div>
</body>
</html>
Output:
For the above code, we receive an output like this:
Now let’s move forward with the details overview of directive categories.
Categories of a directive
Attribute directive
Attribute directives are used to change the behavior and appearance of the DOM elements. They can even hide or unhide certain DOM elements as per your requirement. There are many pre-built attribute directives like NgStyle, NgClass, and others. However, if you wish to create a custom attribute directive, you can do so for any desired functionality.
Structural directives
Structural directives in Angular are responsible for altering the structure of the DOM. They implement this task by adding or removing the elements from the DOM. The most popular structural directives are NgIf, NgFor, and NgSwitch.
Tip: When you wish to distinguish between an attribute directive and a structural directive, just take a look at the syntax. Attribute directive does not have a () prefix while structural directive always starts with a () prefix.
Components
AngularJS components are directives that have templates which is the only point of difference between the other two types of directives and components. Thus, it is rightly said that the component is easier to use as it is a directive with a template.
What is a custom directive?
A custom directive in AngularJS refers to the user-defined directive that allows you to use desired functions to extend HTML functionality. It is used by replacing the element with itself for which it is activated. They are used when no other template is needed.
So when you wish to alter the style or behavior of existing HTML elements, without wrapping them in a new component, custom directives come in handy. To summarize, it executes logic and implements visual changes to an element for which it is used.
So, now if you have to create custom directives, you will need to fulfill some prerequisites for the same. We will address them all in the next segment.
How does a custom directive work?
AngularJS finds the matching element during the bootstrap process and proceeds with a one-time activity using the compile method. It then processes the element using the link () method of the custom directive.
Prerequisite understanding for writing a directive
It is important to know how AngularJS’s HTML compiler works before creating a custom directive.
Matching directives
This directive helps in determining when to use a specific directive. Let’s understand it with an example.
Let’s assume that in the below-given example, we say that the "<input>" element matches the ngClass directive.
<div [ngClass]="'active'"> </div> <div [ngClass]="['active', 'open']"> </div>
This is how it matches directives and understands which one to use.
Normalization
AngularJS normalizes the element’s attributes and tags name to determine and know the directives that match the elements. In everyday practice, AngularJS directive is known by its case-sensitive camelCase normalized name such as ngClass. But, since we know that HTML is case-sensitive, directives are referred to in the DOM by lowercase forms such as ng-class.
So, when you head towards the process of normalization, this is what you need to do.
- Strip data- and x- from the front of attributes/elements.
- Convert the _, -, :, -delimited name to camelCase.
For instance, check the below-given example in which all the forms matches the ngBind directive and are equivalent.
<div ng-controller="Controller"> Hello <input ng-model='name'> <hr/> <span ng-bind="name"></span> <br/> <span ng:bind="name"></span> <br/> <span ng_bind="name"></span> <br/> <span data-ng-bind="name"></span> <br/> <span x-ng-bind="name"></span> <br/> </div>
The above code will provide the following output.
Hello Max Karl Ernst Ludwig Planck (April 23, 1850 – October 4, 1947)
Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)
Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)
Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)
Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)
Best practice: It’s recommended that you use the dash-delimited format like ng-class for ngClass.
Types of directives
From adobe, it is understood that $compile is what matches the directives. It matches them based on attributes (A), element names (E), class names (C), and comments (M). We have described each one of them in the next segment.
- Element directive: This directive gets activates when a matching element is found.
- CSS: This directive gets activated when a matching CSS style is found.
- Comment: This directive gets activated when a matching comment is found.
- Attribute: This directive gets activated when a matching attribute is found.
For all the built-in AngularJS directives, the documentation page shows the support for each match. The default one of EA.
Creating a custom directive
Before you head on to create a directive, it is important to talk about the API for registering directives on modules. Here’s how you can do it.
Use the module.directive API in which the module.directive takes a normalized directive name followed by a factory function. This factory function will return an object. It will tell with different options to tell $compile how the directive should behave when matched.
Since the $compile only gets invoked once when the directive matches for the first time, any initialization work can be performed here. To invoke the function, we use $injector.invoke which makes it injectable like a controller.
Now that you are familiar with the above-discussed concept, you can create a custom directive. The easiest way to create a custom directive in Angular is with the @Directive decorator. Start by declaring the directive in the corresponding (app-) module before we can use it. You can use the code below:
ng generate directive example
Tip: While using the angular-cli, you don't have to worry about declaring it since it is done automatically. The generated directive will look somewhat like the one given below.
import { Directive } from '@angular/core'
@Directive({
selector: '[appExample]',
})
export class ExampleDirective {
constructor() {}
}
Conclusion
In this article, we covered everything from the basics of a directive to how you can create a custom directive with all needed in between. Now that you are clear with the core concept of AngularJS directives, try extending the HTML functionality with your desired directive for your Angular application. In case you stumble anywhere in the process, come back to the article for a quick revision to get started again.
Author
Srishti Chaudhary
Srishti is a competent content writer and marketer with expertise in niches like cloud tech, big data, web development, and digital marketing. She looks forward to grow her tech knowledge and skills.
Frequently Asked Questions
Press
Blog
