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...