{"id":46287,"date":"2019-01-01T09:20:29","date_gmt":"2019-01-01T03:50:29","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=46287"},"modified":"2020-01-31T10:43:47","modified_gmt":"2020-01-31T05:13:47","slug":"angularjs-directives","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/angularjs-directives\/","title":{"rendered":"AngularJS Directives &#8211; Types of Directive with Syntax &amp; Examples"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:1699,&quot;href&quot;:&quot;https:\\\/\\\/docs.angularjs.org\\\/guide\\\/directive&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250929084417\\\/https:\\\/\\\/docs.angularjs.org\\\/guide\\\/directive&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-12-09 17:38:01&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2025-12-16 17:08:31&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2025-12-24 05:31:56&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-01-12 11:46:15&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-22 12:40:13&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-28 10:17:49&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-04-03 13:46:32&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-05-01 07:36:23&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-06-03 07:09:27&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-06-03 07:09:27&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>Let&#8217;s start with the new topic of <strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-tutorial-for-beginner\/\">AngularJS<\/a><\/strong> 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.<\/p>\n<div id=\"attachment_46372\" style=\"width: 1210px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/AngularJS-Directives-01.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-46372\" class=\"size-full wp-image-46372\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/AngularJS-Directives-01.jpg\" alt=\"AngularJS Directives Tutorial\" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/AngularJS-Directives-01.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/AngularJS-Directives-01-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/AngularJS-Directives-01-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/AngularJS-Directives-01-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/AngularJS-Directives-01-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/AngularJS-Directives-01-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><p id=\"caption-attachment-46372\" class=\"wp-caption-text\">AngularJS Directives &#8211; Types of Directive with Syntax &amp; Examples<\/p><\/div>\n<h2>1. What are AngularJS Directives?<\/h2>\n<p>In the previous article, we said that \u201cAngularJS extends the functionality of HTML\u201d but didn\u2019t discuss how? The answer to this question is directive. Using AngularJS Directives we can extend the functionality of HTML.<\/p>\n<p>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.<\/p>\n<p>With the DOM (Document Object Model),\u00a0angularJS directives use to add a particular behaviour.<\/p>\n<h3>a. The\u00a0Syntax of AngularJS Directives<\/h3>\n<p>Most of the directives in AngularJS start with prefix ng. Here ng means angular.\u00a0But, it is not necessary that it always starts with ng as prefix. One can use x- or data- as prefix too.<\/p>\n<p>For example:<\/p>\n<p><strong>ng-bind<\/strong> is a directive can also be written as <strong>data-ng-bind.<\/strong><\/p>\n<p>Or<\/p>\n<p><strong>ng-bind<\/strong> is a directive can also be written as<strong> x-ng-bind<\/strong>.<\/p>\n<p>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 \u2013 in a syntax of the directive with : or _<\/p>\n<p>ng-bind is a directive can also be written as ng:bind.<\/p>\n<p>Or<\/p>\n<p>ng-bind is a directive can also be written as ng:bind.<\/p>\n<p>The meaning of ng-bind or ng:bind or ng_bind are same. They all use to perform the same functionality.<\/p>\n<h3>b. Example of Angular Directives<\/h3>\n<p>Examples of Syntax variation in directive through code:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html &gt;\r\n&lt;head&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.16\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app&gt;\r\n    Tutorial Name is: &lt;input type=\"text\" ng-model=\"name\" \/&gt; &lt;br \/&gt;\r\n    data-ng-bind: &lt;span data-ng-bind=\"name\"&gt;&lt;\/span&gt;&lt;br \/&gt;\r\n    data-ng:bind: &lt;span data-ng:bind=\"name\"&gt;&lt;\/span&gt;&lt;br \/&gt;\r\n    data:ng:bind: &lt;span data:ng:bind=\"name\"&gt;&lt;\/span&gt;&lt;br \/&gt;\r\n    x:ng:bind: &lt;span x:ng:bind=\"name\"&gt;&lt;\/span&gt;&lt;br \/&gt;\r\n    ng:bind: &lt;span ng:bind=\"name\"&gt;&lt;\/span&gt;&lt;br \/&gt;\r\n    x-ng-bind: &lt;span x-ng-bind=\"name\"&gt;&lt;\/span&gt;&lt;br \/&gt;\r\n    x_ng_bind: &lt;span x_ng_bind=\"name\"&gt;&lt;\/span&gt;&lt;br \/&gt;\r\n    ng_bind: &lt;span ng_bind=\"name\"&gt;&lt;\/span&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Tutorial Name is:<\/p>\n<p>data-ng-bind:<\/p>\n<p>data-ng:bind:<\/p>\n<p>data:ng:bind:<\/p>\n<p>x:ng:bind:<\/p>\n<p>ng:bind:<\/p>\n<p>x-ng-bind:<\/p>\n<p>x_ng_bind:<\/p>\n<p>ng_bind:<\/p>\n<p>When you write something within textbox it will get displayed corresponding to every directive where we want to print name.<\/p>\n<p><strong>Tutorial Name is: <span class=\"df-rect\">Data Flair<\/span> <\/strong><\/p>\n<p>data-ng-bind: Data Flair<\/p>\n<p>data-ng:bind: Data Flair<\/p>\n<p>data:ng:bind: Data Flair<\/p>\n<p>x:ng:bind: Data Flair<\/p>\n<p>ng:bind: Data Flair<\/p>\n<p>x-ng-bind: Data Flair<\/p>\n<p>x_ng_bind: Data Flair<\/p>\n<p>ng_bind: Data Flair<\/p>\n<p>Whenever you change the text within textbox it gets change in below specified places also.<\/p>\n<h2>2. Types of Directive in AngularJS<\/h2>\n<p>There are two types of AngularJs directives:<\/p>\n<ul>\n<li><strong>Built-in directive<\/strong><\/li>\n<\/ul>\n<p>These AngularJS directives, predefine in a framework. We can directly use it to offer functionality to our application.<\/p>\n<ul>\n<li><strong>Custom directive<\/strong><\/li>\n<\/ul>\n<p>Custom directives are self-created directives. They are not predefined but we can define it on our own.<\/p>\n<h2>3. Various Built-in Directives in\u00a0Angular<\/h2>\n<p>Here, we will discuss a list of Angular Directives with their examples:<\/p>\n<ul>\n<li>ng-inti<\/li>\n<li>ng-bind<\/li>\n<li>ng-model<\/li>\n<li>ng-if<\/li>\n<li>ng-repeat<\/li>\n<li>ng- disable<\/li>\n<li>ng-readonly<\/li>\n<\/ul>\n<div id=\"attachment_46369\" style=\"width: 1210px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Various-Built-in-Directives-01-2.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-46369\" class=\"size-full wp-image-46369\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Various-Built-in-Directives-01-2.jpg\" alt=\"AngularJS Directives - Types of Built-in Directives\" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Various-Built-in-Directives-01-2.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Various-Built-in-Directives-01-2-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Various-Built-in-Directives-01-2-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Various-Built-in-Directives-01-2-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Various-Built-in-Directives-01-2-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Various-Built-in-Directives-01-2-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><p id=\"caption-attachment-46369\" class=\"wp-caption-text\">Various Built-in Directives in\u00a0Angular<\/p><\/div>\n<h3>i. ng-init<\/h3>\n<p>This angularJS directive is used for initializing the variables.<\/p>\n<p><strong>Syntax<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">ng-init=\u201dproperty1=value,property2=value\u201d<\/pre>\n<p><strong>Example<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html &gt;\r\n&lt;head&gt;\r\n&lt;script src=\"~\/Scripts\/angular.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body &gt;\r\n&lt;div ng-app=\u201d\u201d ng-init=\"name='Data Flair\u2019\"&gt;\r\n      {{name}} welcomes you!! &lt;br \/&gt;\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Data Flair welcomes you!!<\/p>\n<h3>ii. ng-bind<\/h3>\n<p>By using ng-bind directive the content of an HTML element replace with the value of a given variable as well as an expression.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html &gt;\r\n&lt;head&gt;\r\n&lt;script src=\"~\/Scripts\/angular.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app=\"\"&gt;\r\n&lt;div&gt;5 + 5 = &lt;span ng-bind=\"5 + 5\"&gt;&lt;\/span&gt; &lt;br \/&gt;&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>5+5=10<\/p>\n<h3>iii. ng-model<\/h3>\n<p>The ng-model directive uses to bind the elements such as &lt;select&gt;,&lt;textarea&gt;,&lt;input&gt; to a particular property on $scope object to assign the value of a property will be the property of element vice versa.<\/p>\n<p>The <em>difference between ng-init and ng-model<\/em> is that ng-model is bind to $scope object while ng-init is not bound to $scope object.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html &gt;\r\n&lt;head&gt;\r\n&lt;script src=\"~\/Scripts\/angular.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body ng-app&gt;\r\nEnter Text:&lt;input type=\"text\" ng-model=\"name\" \/&gt;\r\n&lt;div&gt;\r\nThis is the tutorial of {{name}}\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p><strong>Enter Text: <\/strong><\/p>\n<p>This is the tutorial of<\/p>\n<p><strong>Enter Text:\u00a0 <span class=\"df-rect\">Angular JS<\/span><\/strong><\/p>\n<p>This is the tutorial of Angular Js.<\/p>\n<h3>iv. ng-if<\/h3>\n<p>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.<\/p>\n<p><strong>Syntax:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;element ng-if=\"expression\"&gt;&lt;\/element&gt;<\/pre>\n<p><strong>Example:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;body ng-app=\"\"&gt;\r\nSelect: &lt;input type=\"checkbox\" ng-model=\"value\" ng-init=\"value = true\"&gt;\r\n&lt;div ng-if=\"value\"&gt;\r\n&lt;h1&gt;HEY!!&lt;\/h1&gt;\r\n&lt;\/div&gt;\r\n&lt;p&gt;If checkbox is not checked, the above div elements is removed&lt;\/p&gt;\r\n&lt;p&gt; if you check the checkbox, the above div elements is not removed&lt;\/p&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Output (When the checkbox is not checked):<\/p>\n<p><strong>Select:<\/strong><\/p>\n<p>If a checkbox is not checked, the above div elements are removed<\/p>\n<p>if you check the checkbox, the above div elements are not removed<\/p>\n<p>Output (When the checkbox is checked):<\/p>\n<p>Select: <i class=\"fa fa-check\"><\/i><\/p>\n<p>If a checkbox is not checked, the above div elements are removed<\/p>\n<p>if you check the checkbox, the above div elements are not removed<\/p>\n<h3>v. ng-repeat<\/h3>\n<p>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.<\/p>\n<h3>vi. ng-disable<\/h3>\n<p>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.<\/p>\n<h3><strong>vii. ng-readonly<\/strong><\/h3>\n<p>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.<\/p>\n<p>So, this was all about AngularJs Directives. Hope you liked our explanation.<\/p>\n<h2>4. Conclusion<\/h2>\n<p>In this article, we learned about built-in <a href=\"https:\/\/docs.angularjs.org\/guide\/directive\">Directives<\/a> in AngularJS through a brief introduction with syntax and examples.\u00a0Still, have a doubt? Feel free to ask in the comment section.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;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&#46;&#46;&#46;<\/p>\n","protected":false},"author":5,"featured_media":46372,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18153],"tags":[18121,18122,18119,18115,18117,18114,18116,18120,18118,18123,18124],"class_list":["post-46287","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","tag-built-in-directives-in-angular","tag-custom-directive-in-angular","tag-ng-disable","tag-ng-bind","tag-ng-if","tag-ng-inti","tag-ng-model","tag-ng-readonly","tag-ng-repeat","tag-types-of-directives-in-angularjs","tag-what-is-angularjs-directives"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>AngularJS Directives - Types of Directive with Syntax &amp; Examples - DataFlair<\/title>\n<meta name=\"description\" content=\"AngularJS Directives - Types of Directives in AngularJS: Built-in, custom directives: ng-inti, ng-bind, ng-model, ng-if, ng-repeat, ng- disable, ng-readonly\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/angularjs-directives\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AngularJS Directives - Types of Directive with Syntax &amp; Examples - DataFlair\" \/>\n<meta property=\"og:description\" content=\"AngularJS Directives - Types of Directives in AngularJS: Built-in, custom directives: ng-inti, ng-bind, ng-model, ng-if, ng-repeat, ng- disable, ng-readonly\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/angularjs-directives\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-01T03:50:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-31T05:13:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/AngularJS-Directives-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AngularJS Directives - Types of Directive with Syntax &amp; Examples - DataFlair","description":"AngularJS Directives - Types of Directives in AngularJS: Built-in, custom directives: ng-inti, ng-bind, ng-model, ng-if, ng-repeat, ng- disable, ng-readonly","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/angularjs-directives\/","og_locale":"en_US","og_type":"article","og_title":"AngularJS Directives - Types of Directive with Syntax &amp; Examples - DataFlair","og_description":"AngularJS Directives - Types of Directives in AngularJS: Built-in, custom directives: ng-inti, ng-bind, ng-model, ng-if, ng-repeat, ng- disable, ng-readonly","og_url":"https:\/\/data-flair.training\/blogs\/angularjs-directives\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-01-01T03:50:29+00:00","article_modified_time":"2020-01-31T05:13:47+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/AngularJS-Directives-01.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/angularjs-directives\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-directives\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"AngularJS Directives &#8211; Types of Directive with Syntax &amp; Examples","datePublished":"2019-01-01T03:50:29+00:00","dateModified":"2020-01-31T05:13:47+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-directives\/"},"wordCount":856,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-directives\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/AngularJS-Directives-01.jpg","keywords":["Built-in Directives in Angular","Custom directive in Angular","ng- disable","ng-bind","ng-if","ng-inti","ng-model","ng-readonly","ng-repeat","Types of Directives in AngularJS","What is AngularJS Directives"],"articleSection":["AngularJS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/angularjs-directives\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/angularjs-directives\/","url":"https:\/\/data-flair.training\/blogs\/angularjs-directives\/","name":"AngularJS Directives - Types of Directive with Syntax &amp; Examples - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-directives\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-directives\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/AngularJS-Directives-01.jpg","datePublished":"2019-01-01T03:50:29+00:00","dateModified":"2020-01-31T05:13:47+00:00","description":"AngularJS Directives - Types of Directives in AngularJS: Built-in, custom directives: ng-inti, ng-bind, ng-model, ng-if, ng-repeat, ng- disable, ng-readonly","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-directives\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/angularjs-directives\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/angularjs-directives\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/AngularJS-Directives-01.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/AngularJS-Directives-01.jpg","width":1200,"height":628,"caption":"AngularJS Directives - Types of Directive with Syntax &amp; Examples"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/angularjs-directives\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"AngularJS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/angularjs\/"},{"@type":"ListItem","position":3,"name":"AngularJS Directives &#8211; Types of Directive with Syntax &amp; Examples"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team creates expert-level guides on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Our goal is to empower learners with easy-to-understand content. Explore our resources for career growth and practical learning.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/46287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=46287"}],"version-history":[{"count":21,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/46287\/revisions"}],"predecessor-version":[{"id":46707,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/46287\/revisions\/46707"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/46372"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=46287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=46287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=46287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}