• Articles
  • Tutorials
  • Interview Questions

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

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

Output
o10
If you uncheck the button then output is
o11

If you are an AngularJS enthusiast, enroll in the Angular Course and get certified now!

3. ng-hide Directive

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

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

Output
o12
If you uncheck the button then output is
o13

Check out our Angular tutorial and get started with Angular today!

4. ng-click directive

It represents a AngularJS click event.
e.g.

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

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

Want to be ready for a Job? Check out our blog on Angular Interview Questions!

Course Schedule

Name Date Details
Web Development Courses 12 Oct 2024(Sat-Sun) Weekend Batch
View Details
Web Development Courses 19 Oct 2024(Sat-Sun) Weekend Batch
View Details
Web Development Courses 26 Oct 2024(Sat-Sun) Weekend Batch
View Details

About the Author

Senior UI Developer

Atif Khan, a seasoned Senior UI Developer with 7+ years of experience, excels in crafting captivating digital experiences. He is proficient in HTML, CSS, and JavaScript, and he transforms complex requirements into user-friendly interfaces while staying updated with industry trends to deliver innovative solutions.