title: How to auto resize the textarea to fit the content?
body: <p>I'm trying to auto resize the <code>textarea</code>  so it fits the content in it but I'm facing a stuttering issue after I click enter to proceed to the next line. How can I fix this?</p>
  
  <p>This is what I'm trying to do, see the image below.
  <a href="https://i.stack.imgur.com/OKR6m.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OKR6m.png" alt="enter image description here"></a></p>
  
  <p>Please see this <a href="https://stackblitz.com/edit/next-line-view-child?file=app/app.component.ts" rel="noreferrer">link</a> for the StackBlitz example</p>
  
  <p><strong>CODE</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>this.form.valueChanges.subscribe(() =&gt; {
     const textarea = this.myDiv.nativeElement;
     textarea.addEventListener('keydown', function() {
         setTimeout(() =&gt; {
             this.style.cssText = 'height:auto; padding:0';
             this.style.cssText = 'height:' + this.scrollHeight + 'px';
         }, 0);
     });
  });
  </code></pre>