HDTuto.com

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




November 12, 2020 | Category : Other



Blog Search