Reputation: 3092
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.
Upvotes: 9
Views: 20444
Reputation: 658263
elementView
won't be set before ngAfterViewInit
was called.
If you have your code in ngOnInit
or the constructor, you'll get this error.
Upvotes: 4
Reputation: 41
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!
Upvotes: 4
Reputation: 1038
@Component({
selector: 'selector',
template: `<button #tableToMeasure>Click me</button>`
})
export class FeatureComponent implements AfterViewInit {
@ViewChild('tableToMeasure') elementView;
constructor() {
}
ngAfterViewInit() {
console.log(this.elementView.nativeElement);
}
}
Upvotes: 5