title: How do I get my text from speech rendered to Angular Html?
body: <p>I am trying to render a variable called &quot;this.text&quot; to my app.component.html. I am able to change &quot;this.text&quot; through a function called &quot;recognition.onresult&quot; but it doesn't render or change to the screen. The &quot;recognition.onresult&quot; function was orginally in the &quot;speech.ts&quot; file but I was getting better results with it in the component file.</p>
  <p>app.component.html</p>
  <pre><code>&lt;h1&gt;{{text}}&lt;/h1&gt;
  </code></pre>
  <p>app.component.ts</p>
  <pre><code>import { Component, OnInit, OnDestroy } from '@angular/core';
  import { SocketService } from &quot;./socket.service&quot;;
  import recognition from './speech';
  
  ...
  
  export class AppComponent implements OnInit, OnDestroy {
  
      text:any = 'hi';
  
        public constructor(private socket: SocketService) {
      }
      getText(text:any){
        console.log(text)
        this.text = text
       if (text === &quot;what's today's date&quot;){
         alert(&quot;none ya&quot;)
         this.text = &quot;None ya&quot;
       }
      }
      
      ngOnInit(){
        recognition.onresult = (event:any) =&gt; {
          // get the results of the speech recognition
          const resultIndex = event.resultIndex
          const result = event.results[resultIndex][0].transcript
          this.getText(result.toString())
          // perform actions based on transcript and level of confidence
        }
          this.socket.getEventListener().subscribe(event =&gt; {
            recognition.start();
              if(event.type == &quot;message&quot;) {
                  let data = event.data.content;
                  if(event.data.sender) {
                      data = event.data.sender + &quot;: &quot; + data;
                  }
              }
              if(event.type == &quot;close&quot;) {
              }
              if(event.type == &quot;open&quot;) {
                  
                }
          });
      }
  ...
  }
  </code></pre>
  <p>speech.ts</p>
  <pre><code>declare const webkitSpeechRecognition: any;
  
  var SpeechRecognition = webkitSpeechRecognition;
  let recognition = new SpeechRecognition()
  recognition.lang = &quot;en&quot;;
  recognition.continuous = true
  
  recognition.onstart = function () {
    // actions to be performed when speech recognition starts
    console.log(recognition)
  };
  
  recognition.onspeechend = function () {
    // stop speech recognition when the person stops talking
    recognition.stop();
  }
  
  
  
  export default recognition
  
  
  
  </code></pre>