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.

Dmitrij Kuba · Accepted Answer · 2017-05-08 11:06:49Z

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 8, 2017 at 11:06

Dmitrij Kuba

1,03810 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Howard Over a year ago

Hmm sorry I tried that but still getting the same error.

Günter Zöchbauer · Accepted Answer · 2018-11-10 12:21:08Z

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, 2018 at 12:21

answered May 8, 2017 at 11:02

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

7 Comments

Andrew Howard Over a year ago

So I have to use it within ngAfterViewInit()?

SrAxi Over a year ago

So he should use elementView only after the viw initialized? So, inside ngAfterViewInit?

Günter Zöchbauer Over a year ago

Either inside ngAfterViewInit or anything that's executed later, for example an event handler for user actions (click, scroll, ...)

Andrew Howard Over a year ago

Hmm I tried it on ngAfterViewInit() but still getting same error

Günter Zöchbauer Over a year ago

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)

|

Sverre Boer · Accepted Answer · 2017-11-14 11:17:10Z

4

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!

answered Nov 14, 2017 at 11:17

Sverre Boer

411 bronze badge

Collectives™ on Stack Overflow

Angular 2 Get width of a div

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related