角度2 ElementRef nativeElement offsetWidth始终为0

Question

I need to get the width of an element that has a dynamic width, I can get the width with pure javascript but not Angular 2.

constructor(private element: ElementRef) {
// ....

getting the width

let width =  this.element.nativeElement.offsetWidth;

console.log('js offset width', document.getElementById('foobar').offsetWidth);
console.log('angular2 offset width', width);

This works fine:

document.getElementById('foobar').offsetWidth 

But not angular 2's width, it's always 0. So how can I get the offset width via Angular's ElementRef?

Answer 1

You are not associating the TemplateRef with any of the DOM element

@ViewChild('foo') foo: TemplateRef;

Have the attribute in HTML as

 <div #foo></div>

Now OnInit try to get the value it will be a non zero.

LIVE DEMO