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
If you uncheck the button then output is
Watch this video on Full Stack Web Development Course:
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
If you uncheck the button then output is
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
If you uncheck the button then output is
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
When you click on this button then number of click is increased by one like as follows:
Want to be ready for a Job? Check out our blog on Angular Interview Questions!