How to get the dimensions of the Viewport using AngularJS ? - GeeksforGeeks

30 Sep, 2020
In this article, we will see how to get the dimensions of the Viewport in AngularJS.
Approach: 
The approach is to use clientWidth and innerWidth property. 
The maximum of these values should be the width and height respectively.
Example 1: In this example, the height and width are calculated in pixels.
HTML
<!DOCTYPE HTML> <html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">    </script>      <script>        var myApp = angular.module("app", []);            myApp.controller("controller", function($scope) {            $scope.height = '';            $scope.width = '';            $scope.getVPDimnsn = function() {                    $scope.width =                     Math.max(document.documentElement.clientWidth,                            window.innerWidth || 0)                $scope.height =                     Math.max(document.documentElement.clientHeight,                            window.innerHeight || 0)                };            });    </script></head>   <body style="text-align:center;">    <h1 style="color:green;">          GeeksForGeeks      </h1>             <p>        How to get the dimensions of the         Viewport in AngularJS    </p>      <div ng-app="app">          <div ng-controller="controller">            <button ng-click='getVPDimnsn()' >                Click here            </button>            <br><br>            Height of viewport = {{height}}px            <br>            Width of viewport= {{width}}px            <br>        </div>     </div></body>       </html>
Output:
Example 2: In this example, the height and width are calculated in centimeters.
HTML
<!DOCTYPE HTML> <html>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">    </script>      <script>        var myApp = angular.module("app", []);            myApp.controller("controller", function($scope) {            $scope.height = '';            $scope.width = '';            $scope.getVPDimnsn = function() {                    $scope.width =                     Math.max(document.documentElement.clientWidth,                            window.innerWidth || 0)                $scope.height =                     Math.max(document.documentElement.clientHeight,                            window.innerHeight || 0)                };            });    </script></head>   <body style="text-align:center;">    <h1 style="color:green;">          GeeksForGeeks      </h1>         <p>        How to get the dimensions of the Viewport in AngularJS    </p>      <div ng-app="app">          <div ng-controller="controller">            <button ng-click='getVPDimnsn()' >                Click here            </button>            <br>            <br>            Height of viewport = {{height * 2.54 / 96}}cm            <br>            Width of viewport= {{width * 2.54 / 96}}cm            <br>        </div>     </div></body>       </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
AngularJS-Misc
HTML-Misc
AngularJS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular 10 (blur) Event
Angular PrimeNG Messages Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property