How to Get Element Height and Width in Angular?

By Hardik Savani | November 11, 2020 | Category : Angular


Now, let's see post of angular get element width and height. We will look at example of how to get div height and width in angular. let’s discuss about angular get element width. In this article, we will implement a get div width in angular. You just need to some step to done angular get element height.

we will able to get element width and height in angular 6, angular 7, angular 8, angular 9, angular 10 and angular 11 version.

In this example, i will take one div dom element and set it's width 200px and height 200px using css. then i will use ngAfterViewInit() and ViewChild and get current div height and width.

so simply, lets follow bellow example to done with getting div width and height.

Preview:

src/app/app.component.html

<h1>Angular Get Element Width and Height - ItSolutionStuff.com</h1>

<div #myIdentifier>

<p>This is test.</p>

</div>

src/app/app.component.css

div{

background-color: red;

width: 200px;

height: 200px;

}

src/app/app.component.ts

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent implements AfterViewInit {

constructor() { }

ngAfterViewInit() {

var width = this.myIdentifier.nativeElement.offsetWidth;

var height = this.myIdentifier.nativeElement.offsetHeight;

console.log('Width:' + width);

console.log('Height: ' + height);

}

@ViewChild('myIdentifier')

myIdentifier: ElementRef;

}

Output:

Width:200

Height: 200

Now you can run and check it.

i hope it can help you...



Tags : Angular


Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: