How do I get my text from speech rendered to Angular Html?

Question

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

What you have should work. From what you describe, your Angular instance does not react to changes made to you component's model, which means it's broken. Could you create a *runnable* [mcve] making sure it reproduces your bug on codesandbox.io or similar? From what you've posted there is no way of knowing what's wrong with your app. It might be a config issue or it might be something quite trivial, like having to re-start the serve. — tao, Jan 29 '22 at 14:51

score 0 · Answer 1 · answered Jan 29 '22 at 15:42

If your logic is fine, then you could just use ChangeDetectorRef which will explicitly mark changes and re-render the view.

import { ChangeDetectorRef } from '@angular/core';
...

constructor(private cdr:ChangeDetectorRef) {
   ...
}

Use change detection in getText() function after updating text.

this.cdr.detectChanges();

This should reflect changes in HTML.

How do I get my text from speech rendered to Angular Html?

1 Answers1