Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to dynamically get the content height of a div using AngularJS?
In this article, we will explore how to dynamically get the content height of a <div> HTML element using AngularJS, using its getContentHeight() function.
In web development, there are often situations where we need to dynamically determine the height of a <div> element based on its content. We can easily implement it with the help of AnguarlJS, a popular javascript framework, and the various utility functions provided by it.
Let’s understand how to implement the above with the help of some examples.
Example 1
In this example, we will add an ng-init="getContentHeight()" to the <div> element, which calls the getContentHeight() function when the content is initially loaded. We will also add a console.log() inside the getContentHeight() function to display the height of the <div> in the console.
Filename: index.html
<html lang="en">
<head>
<title>How to dynamically get the content height of a div using AngularJS?</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<h3>How to dynamically get the content height of a div using AngularJS?</h3>
<div id="myDiv" ng-style="divStyle" ng-init="getContentHeight()">
<!-- Content goes here -->
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas, tempore temporibus, similique laudantium, incidunt aspernatur eos voluptatum architecto quod ad sequi voluptatem ratione dolores enim? Minus fugit numquam laborum ab.
</div>
<script>
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
$scope.divStyle = { height: 'auto' }; // Initial height set to 'auto'
// Function to get the content height dynamically
$scope.getContentHeight = function() {
const divElement = document.getElementById('myDiv');
$scope.divStyle.height = divElement.offsetHeight + 'px';
console.log('Content height:', divElement.offsetHeight, 'px');
};
}]);
</script>
</body>
</html>
Example 2
In this example, we will follow the above code pattern and display the div element height in the console with the help of 2 different methods, using $scope.$watch, and document.querySelector and $timeout.
Filename: index.html
<html lang="en">
<head>
<title>How to dynamically get the content height of a div using AngularJS?</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<h3>How to dynamically get the content height of a div using AngularJS?</h3>
<div id="myDiv" ng-style="divStyle" ng-init="getContentHeight()">
<!-- Content goes here -->
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas, tempore temporibus, similique laudantium, incidunt aspernatur eos voluptatum architecto quod ad sequi voluptatem ratione dolores enim? Minus fugit numquam laborum ab.
</div>
<script>
angular.module('myApp', [])
.controller('myController', ['$scope', '$element', '$timeout', function($scope, $element, $timeout) {
$scope.divStyle = { height: 'auto' }; // Initial height set to 'auto'
// Example 1: Using $scope.$watch
$scope.$watch(function() {
const divElement = $element[0].querySelector('#myDiv');
return divElement.offsetHeight;
}, function(newHeight) {
$scope.divStyle.height = newHeight + 'px';
console.log('Content height Using $scope.$watch:', newHeight, 'px');
});
// Example 2: Using document.querySelector and $timeout
$scope.getContentHeight = function() {
$timeout(function() {
const divElement = document.querySelector('#myDiv');
$scope.divStyle.height = divElement.offsetHeight + 'px';
console.log('Content height Using document.querySelector and $timeout:', divElement.offsetHeight, 'px');
});
};
}]);
</script>
</body>
</html>
Conclusion
In conclusion, dynamically obtaining the content height of a <div> element using AngularJS can by utilizing AngularJS's directives and controller functions. We explored two examples to illustrate how to implement this functionality. The first example demonstrated how to display the height of the <div> in the console using the console.log() function. The second example showcased how to show the content height with the help of $scope.$watch and document.querySelector and $timeout.
446 Views
