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?

Accepted Answer

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.

Solution