Easy learning with example program codes

Angularjs HTML DOM tutorial

AngularJS DOM:

AngularJS provides the inbuilt directives for binding application data to the attributes of HTML DOM elements.

Name Description
ng-disabled It is used to disable a given control.
ng-show It is used to show a given control.
ng-hide It is used to hide a given control.
ng-click It represents an AngularJS click event.

Example Explanation:

First include the AngularJS library in the application. The ng-app directive initializes the application. For first button we add ng-disabled attribute to a HTML button and pass it a model. Bind the model to a checkbox. When you click on checkbox corresponding value will be updated in button’s ng-disabled attribute through enableDisableButton model value and the button will enable or disable based on it. Same process will follow for other buttons.


<!DOCTYPE html>
<h1>AngularJS HTML DOM Example.</h1>
<div ng-app = "">         
               <td><input type = "checkbox" 
                       ng-model = "enableDisableButton">Disable Button</td>
               <td><button ng-disabled = 
                              "enableDisableButton">Click Me!</button></td>
               <td><input type = "checkbox" 
                                 ng-model = "showHide1">Show Button</td>
               <td><button ng-show = "showHide1">Click Me!</button></td>
               <td><input type = "checkbox" 
                                ng-model = "showHide2">Hide Button</td>
               <td><button ng-hide = "showHide2">Click Me!</button></td>
               <td><p>Total click: {{ clickCounter }}</p></td>
               <td><button ng-click = "clickCounter = clickCounter + 1">
                           Click Me!</button></td>

Try it:

JS Bin on

Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at


We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on

Copyright © 2019 CodesJava Protection Status SiteMap Reference: Java Wiki