Angular Get Element Width and Height Example

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.

Preview:

src/app/app.component.html

<h1>Angular Get Element Width and Height - HDTuto.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...