How to dynamically get the content width of a div using AngularJS ? - GeeksforGeeks

26 Jul, 2021
The content width of a div can dynamically get using clientWidth and scrollWidth properties depending upon the user requirement. If a user wants to know the space required by actual displayed content including the space taken by padding but not including the scrollbars, margins or borders, then the user can use any of the following procedures that will return the width of the entire content of an element.  
Using Element.ClientWidth property
Using Element.scrollWidth property
Example 1: Content Width of div using ClientWidth property will return the width of the entire content of an element.  
html
<!DOCTYPE html><html> <head>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </script>    <style>        #div1 {            height: 100px;            width: 300px;            border: 2px solid black;            overflow: scroll;        }                 h1 {            color: green;        }    </style></head> <body>    <center>        <h1>GeeksforGeeks</h1>        <h3>Getting Content width</h3>        <div id="div1">          Calculate content width of a div on GeeksforGeek.          GeeksforGeeks is a computer science portal which          helps students to learn various programming language          and master data structures and algorithms. There are          various courses available to learn new skills.        </div>        <br>        <button onclick="contentwidth()">Content Width of Div</button>         <p id="p1"></p>     </center>    <script>        function contentwidth() {            var ans = "Content-width: "            + angular.element(document.getElementById("div1").clientWidth)            + "px<br>";            document.getElementById("p1").innerHTML = ans;        }    </script></body> </html>
Output:  
Example 2: Content Width of div using scrollWidth property will return the width of the entire content of an element.  
html
<!DOCTYPE html><html> <head>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </script>    <style>        #div1 {            height: 100px;            width: 300px;            border: 2px solid black;            overflow: scroll;        }                 h1 {            color: green;        }    </style></head> <body>    <center>        <h1>GeeksforGeeks</h1>        <h3>Getting Content width</h3>        <div id="div1">          Calculate content width of a div on GeeksforGeek.          GeeksforGeeks is a computer science portal which          helps students to learn various programming language          and master data structures and algorithms. There are          various courses available to learn new skills.        </div>        <br>        <button onclick="contentwidth()">Content Width of Div</button>         <p id="p1"></p>     </center>    <script>        function contentwidth() {            var ans = "Content-width: "            + angular.element(document.getElementById("div1").scrollWidth)            + "px<br>";            document.getElementById("p1").innerHTML = ans;        }    </script></body> </html>
Output:  
 
sweetyty
AngularJS-Misc
Picked
AngularJS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Auth Guards in Angular 9/10/11
How to bundle an Angular app for production?
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Dropdown Component
How to set focus on input field automatically on page load in AngularJS ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?