Angular 2 Get width of a div

Question

I've looked at numerous posts but none quite do what I want it to do. I have a table which goes outside the width of the page and for various reasons I need to get it's width.

I used:

@ViewChild('tableToMeasure') elementView: ElementRef;

And then put #tableToMeasure on the table. However this seems to error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined

Even though this works on and only on the parent div of the page.

Any ideas? I need to get it's width on both page load and page resize and change another divs width to be the same value.

score 5 · Answer 1 · answered May 08 '17 at 11:06

5

@Component({
    selector: 'selector',
    template: `<button #tableToMeasure>Click me</button>`
})
export class FeatureComponent implements AfterViewInit {

    @ViewChild('tableToMeasure') elementView;

    constructor() {
    }

    ngAfterViewInit() {
        console.log(this.elementView.nativeElement);
    }
}

answered May 08 '17 at 11:06

Dmitrij Kuba

998
9
14

1

Hmm sorry I tried that but still getting the same error. – Andrew Howard May 08 '17 at 11:14

Günter Zöchbauer · Accepted Answer · 2018-11-10T12:21:08.023

4

elementView won't be set before ngAfterViewInit was called. If you have your code in ngOnInit or the constructor, you'll get this error.

edited Nov 10 '18 at 12:21

answered May 08 '17 at 11:02

Günter Zöchbauer

623,577
216
2,003
1,567

So I have to use it within ngAfterViewInit()? – Andrew Howard May 08 '17 at 11:06
So he should *use* `elementView` only after the viw initialized? So, inside `ngAfterViewInit`? – SrAxi May 08 '17 at 11:08
1

Either inside `ngAfterViewInit` or anything that's executed later, for example an event handler for user actions (click, scroll, ...) – Günter Zöchbauer May 08 '17 at 11:12
Hmm I tried it on ngAfterViewInit() but still getting same error – Andrew Howard May 08 '17 at 11:20
Hard to tell from the single line of code you posted. Please provide more information than I can have another look. Ideally a Plunker that allows to reproduce. (Plunker provides an Angular template to get you started easily) – Günter Zöchbauer May 08 '17 at 11:24
Ah it works but you have to see if theres a value first as it fires off a first time without the element actually being ready. if ((this.elementView != null)) {} Thanks for your help :) – Andrew Howard May 08 '17 at 11:33
Perhaps your `#tableToMeasure` is within an `*ngIf`, otherwise it will have a value when `ngAfterViewInit` is called. – Günter Zöchbauer May 08 '17 at 11:48

score 4 · Answer 3 · answered Nov 14 '17 at 11:17

I had the same problem. The solution I found was actually fairly easily; it returns undefined because in your HTML file there is nothing defined as 'tableToMeasure'.

Therefore you have to add #tableToMeasure to your HTML element.

Example code HTML file:

<div #tableToMeasure style="width: 100px; height: 100px">
   <span>Some content!</span
</div>

And in your TypeScript file:

@ViewChild('tableToMeasure')elementView: ElementRef;

Make sure to import ViewChild and ElementRef from @angular/core.

Good luck!

Angular 2 Get width of a div

3 Answers3

Linked