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

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);

Answer 2

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.