Angular Get Element Width and Height Example

November 12, 2020 | Category : Other

Now, let's see article of get div width in angular. This article goes in detailed on angular get element height. i explained simply step by step get element height angular. this example will help you get element height and width angular. Here, Creating a basic example of angular get element width and height.

we will able to get element width and height in angular 6, angular 7, angular 8, angular 9 and angular 10 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.



<h1>Angular Get Element Width and Height -</h1>

<div #myIdentifier>

<p>This is test.</p>




background-color: red;

width: 200px;

height: 200px;



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


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);



myIdentifier: ElementRef;




Height: 200

Now you can run and check it.

i hope it can help you...