How can I get the width of an element using AngularJS?

Question

I realise I can use jQuery to get the width of an element, but I'm curious; is there a way to do so using AngularJS?

Answer 1

Native JS (#id):

document.getElementById(id).clientWidth; 

Native JS (querySelector (class, id, css3 selector)):

document.querySelectorAll(".class")[0].clientWidth; 

Plugging this into angular.element:

angular.element(document.getElementById(id)).clientWidth; angular.element(document.querySelectorAll(".class")[0]).clientWidth; 

If you need to get non rounded numbers, use getBoundingClientRect.

angular.element(document.getElementById(id)).getBoundingClientRect(); 

Some resources on the subject:

• http://msdn.microsoft.com/en-us/library/hh781509(VS.85).aspx
• https://developer.mozilla.org/en-US/docs/Web/API/Element.clientWidth
• https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect

If this floats your boat in terms of syntax and the no-need to plug jQuery into the mix, be wary of cross browser hell.

Answer 2

If you've been scratching your head like me over all these suggestions and they don't work, i found i had to set a timeout. I'm not sure why, maybe because i'm using material design attributes on my divs.

setTimeout(function(){      var divsize = angular.element(document.getElementById('fun_div')).prop('offsetWidth');         console.log('Width of fun_div: ' + divsize);     },50);