Quick Contact


    Angular JS Directives and its Types

    What are AngularJS Directives?

    “Angular JS 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.

    The Syntax of AngularJS Directives

    Most of the directives in AngularJS start with the prefix ng. Here ng means angular. But, it doesn’t need to always begin with ng as a prefix. One can use x- or data- as a prefix too.

    For example:

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

    Or

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

    The meaning of ng-bind or data-ng-bind or x-ng-bind is the 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 command that 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.

    Example of Angular Directives
    	< !DOCTYPE html>
    	< html>
    	< head>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">< /script>
    	< /head>
    	< bodyng-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 we write something within the textbox, it will get displayed corresponding to every directive we want to print.

    Tutorial Name is: Ducat India Tutorial

    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 we change the text within the textbox, it gets a change in the below-specified places also.

    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.

    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
    ng-init

    This angularJS directive is used for initializing the variables.

    Syntax

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

    Example
    	< !DOCTYPE html>
    	< html>
    	< head>
    	< scriptsrc="~/Scripts/angular.js">< /script>
    	< /head>   
    	< body>
    	< div ng-app=”” ng-init="name='Ducat India’">
    	{{name}} welcomes < br />
    	< /div>
    	< /body>
    	< /html>
    	
    Output:

    Ducat India welcomes

    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>
    	< scriptsrc="~/Scripts/angular.js">< /script>
    	< /head>
    	< body ng-app="">
    	< div>10 + 10 = < span ng-bind="10 + 10">< /span>< br />< /div>
    	< /body>
    	< /html>
    	
    Output:

    10+10=20

    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>
    	< scriptsrc="~/Scripts/angular.js">< /script>
    	< /head>
    	< bodyng-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: AngularJS

    This is the tutorial of Angular Js.

    ng-if

    An expression can return either actual value or false value. If the value of the 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”>

    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>
    	

    Enroll Yourself in Live Classes For Online Summer Training.

    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):

    Angular JS Directives and its Types

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

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

    ng-repeat

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

    ng-disable

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

    ng-readonly

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

    Enroll Yourself in Live Classes For Angular Training Online.

    Copyright 1999- Ducat Creative, All rights reserved.