For Developers

AngularJS Directive: Quick Reference in Custom Directives

AngularJs Directive

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.

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.

    <title>AngularJS Directives</title> 
    <script src= 
<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>

Code source


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

AngularJS directive output.webp

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.


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.

  [ngClass]="['active', 'open']">

Code source

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


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/>

Code source

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'

  selector: '[appExample]',
export class ExampleDirective {
  constructor() {}

Code source


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

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.

View more FAQs


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


Know more about remote work.
Checkout our blog here.


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

Hire remote developers

Tell us the skills you need and we'll find the best developer for you in days, not weeks.

Hire Developers