title: How to get style of DOM elements in Angular?
body: <p>I know you can use ngStyle to <em>set</em> styles of an element. But how do I <em>get</em> styles of an element (ie, the default styles as rendered by the browser)?</p>
  
  <p>This code doesn't work but expresses what I'm trying to do:</p>
  
  <pre><code>&lt;p&gt;TEXT&lt;/p&gt;
  width of TEXT element is {{textElement.width}}
  height of TEXT element is {{textElement.height}}
  </code></pre>
  
  <p>I want the p element to render normally (however the browser wants to, without telling it a width or height). However, I want to know what the rendered width and height are. How do I bind things to capture this?</p>
  
  <p>EDIT: Some people asked what I want to do with the width and height. What I want to do is something like this:</p>
  
  <pre><code>&lt;p *ngIf="!isEditing"&gt;{{myText}}&lt;/p&gt;
  &lt;textarea *ngIf="isEditing" [(ngModel)]="myText"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>By default, p is displayed and textarea is not. If the user enters editing mode, p gets replaced by textarea. I wanted to set textarea's width and height to match p's so the transition looks seamless. Is there a better way to do this?</p>