title: How to dynamically add text to textarea while recording via webkitspeech with Angular 2?
body: <p>Currently, I record my voice with this simple code in Angular Component </p>
  
  <pre><code>speechToText() {
      const {webkitSpeechRecognition}: IWindow = &lt;IWindow&gt;window;
      const recognition = new webkitSpeechRecognition();
  
      recognition.lang = 'en-US';
      recognition.continuous = true;
      recognition.interimResults = true;
  
      recognition.onresult = event =&gt; {
        for (let i = event.resultIndex; i &lt; event.results.length; ++i) {
          this.interim_transcript = event.results[i][0].transcript;
        }
      };
  
      recognition.onerror = event =&gt; {
        console.log('Error occured', event);
      };
  
      recognition.start();
    }
  }
  </code></pre>
  
  <p>And in my HTML I have the value bind to the interim result</p>
  
  <pre><code>&lt;textarea #description mdInput rows="5" placeholder="Short Story" name="description" [value]="interim_transcript"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>The problem, however, is that I can see the text being put into the textarea only after I click on the textarea or outside of it to trigger dom update. How to make it update textarea as soon as I begin saying words giving this live text update, same way as here <a href="https://www.google.com/intl/en/chrome/demos/speech.html" rel="nofollow noreferrer">https://www.google.com/intl/en/chrome/demos/speech.html</a> </p>