Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024

DOM in AngularJS

Author Gunjeev Singh
1 upvote
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

AngularJS is a web framework built in Javascript by Google. An important thing to note when discussing the features of AngularJS is that it is structural as well. In the world of web development, the MEAN stack is one of the most prominent technical stacks. Knowing the nuances of AngularJS is an essential aspect of being a good MEAN stack developer. 

AngularJS extends the powers of HTML. AngularJS does this by using a feature called directives. Directives help make static pages dynamic. When we use directives, we do not manually change the code. Instead, we direct AngularJS on how to change the Document Object Model (DOM)

This blog will look into how we manipulate the Document Object Model or DOM in AngularJS using directives. But before that, let us first understand what the DOM in AngularJS is. 

Document Object Model

HTML documents can be processed and displayed in two ways. They can be displayed on the browser as web pages or source code files. It is the same document, but the Document Object Model allows it to be represented in various ways. 

The DOM in AngularJS is a programming interface that allows programmers to easily manipulate the page’s components. With AngularJS, we manage the DOM. 

 

DOM in AngularJS

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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

  1. 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!

Previous article
Angular Lazy Loading
Next article
AngularJS Events
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass