AngularJS Directives – Types of Directive with Syntax & Examples

Free Angular course with real-time projects Start Now!!

Let’s start with the new topic of AngularJS framework that is Directive. In this AngularJS Directives tutorial, we will study how angularJS extends the functionality of HTML. Along with this, we will learn types of Directives in AngularJS with syntax and examples.

AngularJS Directives Tutorial

AngularJS Directives – Types of Directive with Syntax & Examples

1. What are AngularJS Directives?

In the previous article, we said that “AngularJS extends the functionality of HTML” but didn’t discuss how? The answer to this question is directive. Using AngularJS Directives we can extend the functionality of HTML.

We use Angular Directives for making the static page that is an HTML page into a dynamic page. By using directive we can do so without modifying the code manually.

With the DOM (Document Object Model), angularJS directives use to add a particular behaviour.

a. The Syntax of AngularJS Directives

Most of the directives in AngularJS start with prefix ng. Here ng means angular. But, it is not necessary that it always starts with ng as prefix. One can use x- or data- as prefix too.

For example:

ng-bind is a directive can also be written as data-ng-bind.

Or

ng-bind is a directive can also be written as x-ng-bind.

The meaning of ng-bind or data-ng-bind or x-ng-bind is same. They all are used to perform the same functionality. Also, we can replace them – in a syntax of the directive with : or _

ng-bind is a directive can also be written as ng:bind.

Or

ng-bind is a directive can also be written as ng:bind.

The meaning of ng-bind or ng:bind or ng_bind are same. They all use to perform the same functionality.

b. Example of Angular Directives

Examples of Syntax variation in directive through code:

<!DOCTYPE html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app>
    Tutorial Name is: <input type="text" ng-model="name" /> <br />
    data-ng-bind: <span data-ng-bind="name"></span><br />
    data-ng:bind: <span data-ng:bind="name"></span><br />
    data:ng:bind: <span data:ng:bind="name"></span><br />
    x:ng:bind: <span x:ng:bind="name"></span><br />
    ng:bind: <span ng:bind="name"></span><br />
    x-ng-bind: <span x-ng-bind="name"></span><br />
    x_ng_bind: <span x_ng_bind="name"></span><br />
    ng_bind: <span ng_bind="name"></span>
</body>
</html>

Output:

Tutorial Name is:

data-ng-bind:

data-ng:bind:

data:ng:bind:

x:ng:bind:

ng:bind:

x-ng-bind:

x_ng_bind:

ng_bind:

When you write something within textbox it will get displayed corresponding to every directive where we want to print name.

Tutorial Name is: Data Flair

data-ng-bind: Data Flair

data-ng:bind: Data Flair

data:ng:bind: Data Flair

x:ng:bind: Data Flair

ng:bind: Data Flair

x-ng-bind: Data Flair

x_ng_bind: Data Flair

ng_bind: Data Flair

Whenever you change the text within textbox it gets change in below specified places also.

2. Types of Directive in AngularJS

There are two types of AngularJs directives:

  • Built-in directive

These AngularJS directives, predefine in a framework. We can directly use it to offer functionality to our application.

  • Custom directive

Custom directives are self-created directives. They are not predefined but we can define it on our own.

3. Various Built-in Directives in Angular

Here, we will discuss a list of Angular Directives with their examples:

  • ng-inti
  • ng-bind
  • ng-model
  • ng-if
  • ng-repeat
  • ng- disable
  • ng-readonly
AngularJS Directives - Types of Built-in Directives

Various Built-in Directives in Angular

i. ng-init

This angularJS directive is used for initializing the variables.

Syntax

ng-init=”property1=value,property2=value”

Example

<!DOCTYPE html>
<html >
<head>
<script src="~/Scripts/angular.js"></script>
</head>
<body >
<div ng-app=”” ng-init="name='Data Flair’">
      {{name}} welcomes you!! <br />
</div>
</body>
</html>

Output:

Data Flair welcomes you!!

ii. ng-bind

By using ng-bind directive the content of an HTML element replace with the value of a given variable as well as an expression.

<!DOCTYPE html>
<html >
<head>
<script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="">
<div>5 + 5 = <span ng-bind="5 + 5"></span> <br /></div>
</body>
</html>

Output:

5+5=10

iii. ng-model

The ng-model directive uses to bind the elements such as <select>,<textarea>,<input> to a particular property on $scope object to assign the value of a property will be the property of element vice versa.

The difference between ng-init and ng-model is that ng-model is bind to $scope object while ng-init is not bound to $scope object.

<!DOCTYPE html>
<html >
<head>
<script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
Enter Text:<input type="text" ng-model="name" />
<div>
This is the tutorial of {{name}}
</div>
</body>
</html>

Output:

Enter Text:

This is the tutorial of

Enter Text:  Angular JS

This is the tutorial of Angular Js.

iv. ng-if

An expression can return either true value or false value. If the value of expression is true then the elements copy is inserted while if the value of an expression is false then the element is completely removed.

Syntax:

<element ng-if="expression"></element>

Example:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
Select: <input type="checkbox" ng-model="value" ng-init="value = true">
<div ng-if="value">
<h1>HEY!!</h1>
</div>
<p>If checkbox is not checked, the above div elements is removed</p>
<p> if you check the checkbox, the above div elements is not removed</p>
</body>
</html>

Output (When the checkbox is not checked):

Select:

If a checkbox is not checked, the above div elements are removed

if you check the checkbox, the above div elements are not removed

Output (When the checkbox is checked):

Select:

If a checkbox is not checked, the above div elements are removed

if you check the checkbox, the above div elements are not removed

v. ng-repeat

In a specified array, collection ng-repeat directive repeats the HTML property once per each element. The collection can only be an array or an object.

vi. ng-disable

HTML elements disable with this directive, which is based on boolean values. It will not disable when an expression returns a true value and vice versa.

vii. ng-readonly

Based on the Boolean value this directive can make the HTML element read-only. If an expression returns false value it will not become read-only but if the expression return true value it will become read-only.

So, this was all about AngularJs Directives. Hope you liked our explanation.

4. Conclusion

In this article, we learned about built-in Directives in AngularJS through a brief introduction with syntax and examples. Still, have a doubt? Feel free to ask in the comment section.

Your 15 seconds will encourage us to work even harder
Please share your happy experience on Google

follow dataflair on YouTube

Leave a Reply

Your email address will not be published. Required fields are marked *