{"id":46410,"date":"2019-01-10T10:10:51","date_gmt":"2019-01-10T04:40:51","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=46410"},"modified":"2020-01-31T10:43:22","modified_gmt":"2020-01-31T05:13:22","slug":"dom-in-angularjs","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/","title":{"rendered":"DOM in AngularJS &#8211; 4 Major Directives for AngularJS HTML DOM"},"content":{"rendered":"<p>In our last tutorial, we\u00a0discussed <a href=\"https:\/\/data-flair.training\/blogs\/angularjs-directives\/\"><strong>Directives in AngularJS<\/strong><\/a>. Today, we will talk about DOM in AngularJS.Dom, which stands for the <strong>D<\/strong>ocument <strong>O<\/strong>bject <strong>M<\/strong>odel. In this Angular HTML DOM Tutorial, we are going to explore why DOM is used and different types of directives used in DOM: ng-disabled, ng-hide, ng-click, and ng-show with their syntax and examples.<\/p>\n<p>So, are you ready to learn DOM in AngularJS?<\/p>\n<div id=\"attachment_46417\" style=\"width: 1210px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Directives-for-AngularJS-DOM-01.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-46417\" class=\"size-full wp-image-46417\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Directives-for-AngularJS-DOM-01.jpg\" alt=\"DOM in AngularJS \" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Directives-for-AngularJS-DOM-01.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Directives-for-AngularJS-DOM-01-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Directives-for-AngularJS-DOM-01-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Directives-for-AngularJS-DOM-01-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Directives-for-AngularJS-DOM-01-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Directives-for-AngularJS-DOM-01-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><p id=\"caption-attachment-46417\" class=\"wp-caption-text\">Major Directives for AngularJS HTML DOM<\/p><\/div>\n<h2>1. What is DOM in AngularJS?<\/h2>\n<p>The logical structure of documents and documents are accessed and manipulated are defined using DOM elements.\u00a0It defines events, methods, properties for all HTML elements as objects. DOM in AngularJS acts as an API (programming interface) for javascript.<\/p>\n<p>Whenever a web page is loaded, the browser creates a Document Model Object (DOM) of that page.<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/ngmodel-in-angularjs\/\">Do you know how to use ng-model in AngularJS?<\/a><\/strong><\/p>\n<h2>2. Why DOM is used?<\/h2>\n<p>A programmer can use DOM in AngularJS for the following purposes:<\/p>\n<ul>\n<li>Documents are built using DOM elements.<\/li>\n<li>A Programmer can navigate documents structure with DOM elements.<\/li>\n<li>A programmer can add elements and content with DOM elements.<\/li>\n<li>Programmer can modify elements and content with DOM elements.<\/li>\n<\/ul>\n<h2>3. Directives for AngularJS HTML DOM<\/h2>\n<p>We can use various directives to <a href=\"https:\/\/data-flair.training\/blogs\/data-binding-in-angularjs\/\"><strong>bind the application data<\/strong><\/a> to the attributes of DOM elements. Some of them are:<\/p>\n<ul>\n<li>ng-disabled<\/li>\n<li>ng-hide<\/li>\n<li>ng-click<\/li>\n<li>ng-show<\/li>\n<\/ul>\n<h3>i. ng-disabled<\/h3>\n<p>We can use ng-disabled for disabling a given control. Attributes of HTML elements can be disabled using ng-disabled directive.<\/p>\n<p>We can use it by adding it to an HTML button and pass it to model<\/p>\n<p><strong>The Syntax od ng-disabled-<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;input type = \"checkbox\" ng-model = \"enableDisableButton\"&gt;To disable a button\r\n&lt;button ng-disabled = \"enableDisableButton\"&gt;Click&lt;\/button&gt;<\/pre>\n<p><strong>Example of ng-disabled-<\/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&gt;\r\n&lt;div ng-app=\"\" ng-init=\"value=true\"&gt;\r\n&lt;p&gt;&lt;button ng-disabled=\"value\"&gt;Click Here!!&lt;\/button&gt;&lt;\/p&gt;\r\n&lt;p&gt;&lt;input type=\"checkbox\" ng-model=\"value\"\/&gt;Button&lt;\/p&gt;\r\n&lt;p&gt;{{ value }}&lt;\/p&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>Click Here!!<\/p>\n<p>(checked) Button<\/p>\n<p>true<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/\">Recommended reading &#8211; MVC\u00a0Architecture &amp; Working<\/a><\/strong><\/p>\n<p>The ng-disabled directive binds the application data value to the HTML button&#8217;s disabled attribute.<\/p>\n<p>The ng-model directive binds the value of the HTML checkbox element to the value of value (In the above code value is the name of application data).<\/p>\n<p>If the value of value evaluates to true, the button will disable and if the value of value evaluates to false, the button will not disable<\/p>\n<p><strong>Output-<\/strong><\/p>\n<p>Click Here!!<\/p>\n<p>__ Button<\/p>\n<p>false<\/p>\n<h3>ii. ng-show<\/h3>\n<p>We can use ng-show for showing a given control.<\/p>\n<p>We can use it by adding it to an HTML button and pass it to model<\/p>\n<p><strong>The syntax of ng-show-<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;input type = \"checkbox\" ng-model = \"showHide1\"&gt;To show a Button\r\n&lt;button ng-show = \"showHide1\"&gt;Click &lt;\/button&gt;<\/pre>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/ng-include-in-angularjs\/\">Let&#8217;s talk about AngularJS ng-include<\/a><\/strong><\/p>\n<p><strong>Example of ng-show-<\/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&gt;\r\n&lt;div ng-app=\"\"&gt;\r\n&lt;input type = \"checkbox\" ng-model = \"showhiddenbutton\"&gt;Show button\r\n&lt;button ng-show = \"showhiddenbutton\"&gt;Click Here!&lt;\/button&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>__ Show button<\/p>\n<p>When the checkbox is checked the output displays a button of click here! also.<\/p>\n<p><strong>Output-<\/strong><br \/>\n(checked) Show button Click Here!<\/p>\n<h3>iii. ng-hide<\/h3>\n<p>We can use ng-hide for hiding a given control.<\/p>\n<p>We can use it by adding it to an HTML button and pass it to model<\/p>\n<p><strong>The syntax of ng-hide-<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;input type = \"checkbox\" ng-model = \"showHide2\"&gt;To hide a Button\r\n&lt;button ng-hide = \"showHide2\"&gt;Click&lt;\/button&gt;<\/pre>\n<p><strong>Example of ng-hide-<\/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;div ng-app=\"\"&gt;\r\n&lt;input type = \"checkbox\" ng-model = \"hidebutton\"&gt;Hide Button\r\n&lt;button ng-hide = \"hidebutton\"&gt;Click Here!&lt;\/button&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>__ Hide Button Click Here!<\/p>\n<p>When you checked the checkbox, the button click here! will get hidden<\/p>\n<p><strong>Output-<\/strong><\/p>\n<p>(checked) Hide Button<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-modules\/\">Also, learn &#8211; Types of Modules in AngularJS<\/a><\/strong><\/p>\n<h3>iv. ng-click<\/h3>\n<p>We can use ng-click for representing an angularjs click event.<\/p>\n<p>We can use it by adding it to an HTML button and pass it to model<\/p>\n<p><strong>The syntax of ng-click-<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;p&gt;Number of click: {{ clickCounter }}&lt;\/p&gt;\r\n&lt;button ng-click = \"clickCounter = clickCounter + 1\"&gt;Click &lt;\/button&gt;<\/pre>\n<p><strong>Example of ng-click-<\/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;div ng-app=\"\"&gt;\r\n&lt;p&gt;Total number of Clicks: {{ Counts }}&lt;\/p&gt;\r\n&lt;button ng-click = \"Counts = Counts+ 1\"&gt;Click Here!&lt;\/button&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>Total number of Clicks: 4<\/p>\n<p>Click Here!<\/p>\n<p>The number of times you will click on the button Click Here! will get displayed corresponding to the total number of clicks.<\/p>\n<p>So, this was all about DOM in <strong><a href=\"https:\/\/angularjs.org\/\">AngularJS<\/a><\/strong>. Hope you liked our explanation.<\/p>\n<h2>4. Conclusion<\/h2>\n<p>A document object model is used for manipulating and accessing the contents in documents created using HTML or XML. In the above article, we have discussed the directives that are used to bind the application data to the attributes of DOM elements such as ng-disabled, ng- show, ng-hide, ng-click. Furthermore, if you have any query, feel free to share with us, surely we will get back to you!<span hidden class=\"__iawmlf-post-loop-links\" data-iawmlf-links=\"[{&quot;id&quot;:1680,&quot;href&quot;:&quot;https:\\\/\\\/angularjs.org&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20251012132518\\\/https:\\\/\\\/angularjs.org\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-12-09 16:56:34&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2025-12-16 02:56:53&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2025-12-24 06:09:43&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2025-12-30 12:33:32&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-01-03 15:56:17&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-01-08 03:38:13&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-01-12 16:19:38&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-01-20 14:42:08&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-01-26 19:45:28&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-03 07:20:01&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-11 17:57:07&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-16 16:10:49&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-20 09:22:58&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-02-25 06:28:03&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-04 03:52:45&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-07 17:37:50&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-11 15:27:02&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-17 02:00:10&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-22 18:31:51&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-03-26 20:27:20&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-04-03 13:34:56&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-04-07 18:08:48&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-04-16 17:59:35&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-04-20 14:32:31&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-04-29 10:50:56&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-05-04 14:38:33&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-05-13 05:55:06&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-05-26 07:28:40&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-06-11 21:16:07&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-06-15 22:44:50&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-06-21 16:17:00&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-06-27 02:54:19&quot;,&quot;http_code&quot;:206},{&quot;date&quot;:&quot;2026-06-30 15:07:48&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-06-30 15:07:48&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;}]\"><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In our last tutorial, we\u00a0discussed Directives in AngularJS. Today, we will talk about DOM in AngularJS.Dom, which stands for the Document Object Model. In this Angular HTML DOM Tutorial, we are going to explore&#46;&#46;&#46;<\/p>\n","protected":false},"author":5,"featured_media":46417,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18153],"tags":[18185,18175,18176,18177,18183,18184,18174,18180,18178,18179,18181,18182],"class_list":["post-46410","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","tag-angularjs-dom-elements","tag-angularjs-html-dom","tag-directives-for-angularjs-dom","tag-directives-for-dom","tag-document-object-model","tag-dom-elements","tag-dom-in-angularjs","tag-ng-click","tag-ng-disabled","tag-ng-hide","tag-ng-show","tag-why-dom-is-used"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>DOM in AngularJS - 4 Major Directives for AngularJS HTML DOM - DataFlair<\/title>\n<meta name=\"description\" content=\"DOM in AngularJS - Directives for AngularJS HTML DOM: ng-disabled, ng- show, ng-hide, ng-click with syntax and example, learn DOM elements With exmaples\" \/>\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\/dom-in-angularjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DOM in AngularJS - 4 Major Directives for AngularJS HTML DOM - DataFlair\" \/>\n<meta property=\"og:description\" content=\"DOM in AngularJS - Directives for AngularJS HTML DOM: ng-disabled, ng- show, ng-hide, ng-click with syntax and example, learn DOM elements With exmaples\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/\" \/>\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-10T04:40:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-31T05:13:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Directives-for-AngularJS-DOM-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=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"DOM in AngularJS - 4 Major Directives for AngularJS HTML DOM - DataFlair","description":"DOM in AngularJS - Directives for AngularJS HTML DOM: ng-disabled, ng- show, ng-hide, ng-click with syntax and example, learn DOM elements With exmaples","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\/dom-in-angularjs\/","og_locale":"en_US","og_type":"article","og_title":"DOM in AngularJS - 4 Major Directives for AngularJS HTML DOM - DataFlair","og_description":"DOM in AngularJS - Directives for AngularJS HTML DOM: ng-disabled, ng- show, ng-hide, ng-click with syntax and example, learn DOM elements With exmaples","og_url":"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-01-10T04:40:51+00:00","article_modified_time":"2020-01-31T05:13:22+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Directives-for-AngularJS-DOM-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":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"DOM in AngularJS &#8211; 4 Major Directives for AngularJS HTML DOM","datePublished":"2019-01-10T04:40:51+00:00","dateModified":"2020-01-31T05:13:22+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/"},"wordCount":639,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Directives-for-AngularJS-DOM-01.jpg","keywords":["AngularJS DOM elements","AngularJS HTML DOM","Directives for AngularJS DOM","Directives for DOM","Document Object Model","DOM Elements","DOM in AngularJS","ng-click","ng-disabled","ng-hide","ng-show","Why DOM is used"],"articleSection":["AngularJS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/","url":"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/","name":"DOM in AngularJS - 4 Major Directives for AngularJS HTML DOM - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Directives-for-AngularJS-DOM-01.jpg","datePublished":"2019-01-10T04:40:51+00:00","dateModified":"2020-01-31T05:13:22+00:00","description":"DOM in AngularJS - Directives for AngularJS HTML DOM: ng-disabled, ng- show, ng-hide, ng-click with syntax and example, learn DOM elements With exmaples","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Directives-for-AngularJS-DOM-01.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2018\/12\/Directives-for-AngularJS-DOM-01.jpg","width":1200,"height":628,"caption":"DOM in AngularJS - 4 Major Directives for AngularJS HTML DOM"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/#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":"DOM in AngularJS &#8211; 4 Major Directives for AngularJS HTML DOM"}]},{"@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\/46410","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=46410"}],"version-history":[{"count":3,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/46410\/revisions"}],"predecessor-version":[{"id":47411,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/46410\/revisions\/47411"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/46417"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=46410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=46410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=46410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}