Angularjs directives are classes that are responsible for adding required behavior to the...

AngularJS is a great framework. Apart from pre-built set of AngularJS directives, it allows you to create a custom one. Know more in this article.

A Complete Guide to Create Custom Angular JS Directive.

AngularJS Directive: Quick Reference in Custom Directives

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>

For the above code, we receive an output like this:

Now let’s move forward with the details overview of directive categories.

What is a directive?

Categories of a 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.

Attribute directive

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.

Structural directives

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.

Components

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.

What is a custom directive?

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.

How does a custom directive work?

It is important to know how AngularJS’s HTML compiler works before creating a custom directive.

Prerequisite understanding for writing a directive

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.

This is how it matches directives and understands which one to use.

Matching directives

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)

Best practice: It’s recommended that you use the dash-delimited format like ng-class for ngClass.

Normalization

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.

Types of directives

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:

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() {}
}

Creating a custom directive

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.

Conclusion

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.

Decorators are design patterns that separate the decoration or modification of a class without making a change in the original source code. In AngularJS, they are functions that allow a filter, directive, or service to change before its usage.

Directives are behavior-oriented components that are designed to be used many times in a web application. On the other hand, components break the application into smaller chunks to make things easy for building a total component-based model.

DOM is Document Object Model. The attributes of HTML DOM elements are bound together to the application data by the directives in AngularJS.

Frequently Asked Questions

What’s up with Turing?
Get the latest news about us here.

Press

Know more about remote work.
Checkout our blog here.

Blog

Have any questions?
We’d love to hear from you.

FOR DEVELOPERS

AngularJS Directive: Quick Reference in Custom Directives

Author

Srishti Chaudhary

9 Ways to Pass Data Through Angular RouterState

Top Books on Angular Every Software Developer Should Read

How to Make Navigation and Routing Possible in Angular 8?

Best Angular Developer IDE and Tools for Increasing Productivity

Angular 4 Validation: Nested Form and Input Validation

Frequently Asked Questions

Press

Blog

Contact

Hire remote developers