DOM in Angular – Explained

What is AngularJS DOM?

DOM stands for Document Object Model. AngularJS’s directives are used to bind application data to the attributes of HTML DOM elements. The directives are –

1. ng-disabled –

It disables the attribute of HTML elements.
e.g.

<! DOCTYPE html><br>
<html><br>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><br>
<body><br>
<div ng-app=""><br>
<p><br>
<button ng-disabled="disabledbutton">Click Me!</button><br>
</p><br>
<p><br>
<input type="checkbox" ng-model="disabledbutton"/>Disable Button<br>
</p><br>
</div><br>
</body><br>
</html><br>

Output
output8
If you uncheck the button then output is
o9

Watch this video on Full Stack Web Development Course:

Video Thumbnail

2. ng-show Directive

It shows or hides an HTML element.
e.g.

<! DOCTYPE html><br>
<html><br>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><br>
<body><br>
<div ng-app=""><br>
<input type = "checkbox" ng-model = "showhidebutton">Show Button<br>
<button ng-show = "showhidebutton">Click Me!</button><br>
</div><br>
</body><br>
</html><br>

Output
o10
If you uncheck the button then output is
o11

3. ng-hide Directive

It hides or shows an HTML element.
e.g.

<!DOCTYPE html><br>
<html><br>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><br>
<body><br>
<div ng-app=""><br>
<input type = "checkbox" ng-model = "shbutton">Hide Button<br>
<button ng-hide = "shbutton">Click Me!</button><br>
</div><br>
</body><br>
</html><br>

Output
o12
If you uncheck the button then output is
o13

Angular JS Expert

4. ng-click directive

It represents a AngularJS click event.
e.g.

<!DOCTYPE html><br>
<html><br>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><br>
<body><br>
<div ng-app=""><br>
<p>Total Number of Clicks: {{ ClickCount }}</p><br>
<button ng-click = "ClickCount = ClickCount + 1">Click Me!</button><br>
</div><br>
</body><br>
</html><br>

Output
o14
When you click on this button then number of click is increased by one like as follows:
o15

About the Author

Software Developer | Technical Research Analyst Lead | Full Stack & Cloud Systems

Ayaan Alam is a skilled Software Developer and Technical Research Analyst Lead with 2 years of professional experience in Java, Python, and C++. With expertise in full-stack development, system design, and cloud computing, he consistently delivers high-quality, scalable solutions. Known for producing accurate and insightful technical content, Ayaan contributes valuable knowledge to the developer community.