DOM in AngularJS
We can control the DOM in AngularJS using AngularJS directives. Directives help us bind data to the application. Data binding refers to the connection of data and the visual elements on the browser screen. There are four primary directives in AngularJS to control the DOM.
Let us discuss them one by one.
ng-disabled
The ng-disabled is a directive in AngularJS. It helps manipulate the HTML DOM in AngularJS so that if its condition is true, it will apply the disabled attribute on the given HTML element. This directive is usually, but not always, used in inputs or form elements like buttons, text inputs, checkboxes, etc.
We can understand its usage through the following example:
Example
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<center>
<div ng-app="">
<label
>Click me to disable the button:
<input type="checkbox" ng-model="checked" /></label
><br />
<button ng-model="button" ng-disabled="checked">Test Button</button>
</div>
</center>
</body>
</html>
Code explanation:
If the checkbox is checked, the condition in the ng-disabled directive will become true, and hence the button would be disabled.
Output Images
These two images show the output of the code. When the checkbox is checked, you can see that the button is disabled.
ng-show and ng-hide
The ng-show and ng-hide are two more critical directives in AngularJS. They are usually discussed together because they are practically used for the same thing, i.e., hiding or displaying an HTML element and eventually modifying the DOM. It is interesting to note how both these directives achieve the desired results. It is done by adding CCS properties of “display: none;” using the “!important” attribute.
These directives can be understood better using the following example:
Example
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<center>
<div ng-app="">
<!-- ng-show =true -->
<h1 ng-show="true">
My Name is Gunjeev!</h1>
<!-- ng-hide =true -->
<p ng-hide="true">ng-hide is true</p>
<!-- ng-show =false -->
<p ng-show="false">Hello World!</p>
<!-- ng-hide =false -->
<p ng-hide="false">
I am a Web Developer!</p>
</div>
</center>
</body>
</html>
The output of the above code
Code Explanation:
“My name is Gunjeev!” is displayed because the ng-show is true. “I am a Web Developer!” is displayed because the ng-hide directive is false. Hence, an element is displayed when ng-show is true or when ng-hide is false.
ng-click
The ng-click directive from the ng-model is another functional directive in AngularJS for manipulating the HTML DOM. This directive helps in manipulating the DOM by registering a click event. Essentially, what it does is that it manipulates the DOM as directed every time a click event takes place.
The usage of this directive is as follows:
<ANY HTML Element
ng-click="expression">
...
</ANY HTML Element>
Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
<p>Click this button here:</p>
<button ng-click="count = count + 1" ng-init="count=0">OK</button>
<p>You clicked {{count}} times.</p>
</body>
</html>
Output
Frequently Asked Questions
- What is a priority order in AngularJS?
The priority order in AngularJS is an ordered list of classes and directives that show which directive can be overridden by which class or directive.
2. What are other directives present to manipulate the DOM?
Apart from the four most prominent directives mentioned in this blog, some other directives are ngBlur, ngChange, and ngKeypressed.
3. What is the ng-app directive?
The ng-app directive tells AngularJS that the component on which that directive is applied is the root component of the website. Each page can only have one single root component and every component in the website must be nested inside the root component.
Key Takeaways
This blog explained the concept of HTML DOM in AngularJS. We understood how the DOM or the Document Object Model is an interface for programs to manipulate the HTML elements in AngularJS. Then, we looked into the various directives or methods to manipulate the DOM using AngularJS, namely, ng-disabled, ng-show, ng-hide, and ng-click. Now, you are through with the concept of DOM manipulation using AngularJS.
Your journey should not stop here! Continue reading and learning the concepts of Web Development using our carefully-crafted blogs section by clicking here!
116+ registered 