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 TypeScript vs JavaScript Tutorial Video for Beginners:

AngularJS DOM

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

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

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

Recommended Videos

Course Schedule

Name Date
Website Development Architect 2021-03-06 2021-03-07
(Sat-Sun) Weekend batch
View Details
Website Development Architect 2021-03-13 2021-03-14
(Sat-Sun) Weekend batch
View Details
Website Development Architect 2021-03-20 2021-03-21
(Sat-Sun) Weekend batch
View Details

Leave a Reply

Your email address will not be published. Required fields are marked *