I am trying to render a variable called "this.text" to my app.component.html. I am able to change "this.text" through a function called "recognition.onresult" but it doesn't render or change to the screen. The "recognition.onresult" function was orginally in the "speech.ts" file but I was getting better results with it in the component file.

app.component.html

<h1>{{text}}</h1>

app.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SocketService } from "./socket.service";
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 === "what's today's date"){
       alert("none ya")
       this.text = "None ya"
     }
    }
    
    ngOnInit(){
      recognition.onresult = (event:any) => {
        // 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 => {
          recognition.start();
            if(event.type == "message") {
                let data = event.data.content;
                if(event.data.sender) {
                    data = event.data.sender + ": " + data;
                }
            }
            if(event.type == "close") {
            }
            if(event.type == "open") {
                
              }
        });
    }
...
}

speech.ts

declare const webkitSpeechRecognition: any;

var SpeechRecognition = webkitSpeechRecognition;
let recognition = new SpeechRecognition()
recognition.lang = "en";
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