Getting Started with the Angular SpeechToText Component

27 Aug 20259 minutes to read

This section provides a step-by-step guide to creating your first Angular application and integrating the Syncfusion SpeechToText component.

Dependencies

The list of dependencies required to use the SpeechToText component in your application is given below:

|-- @syncfusion/ej2-angular-inputs
    |-- @syncfusion/ej2-angular-base
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-popups

Set up Angular environment

You can use the Angular CLI to set up your Angular applications. To install the Angular CLI, use the following command.

npm install -g @angular/cli

Create an Angular application

Start a new Angular application using the following Angular CLI command.

ng new my-app
cd my-app

Installing the Syncfusion SpeechToText package

Syncfusion packages are distributed in npm as @syncfusion scoped packages. You can get all the Angular Syncfusion packages from this npm link.

Currently, Syncfusion provides two types of package structures for Angular components:

  1. Ivy library distribution package format
  2. Angular compatibility compiler (Angular’s legacy compilation and rendering pipeline) package.

Ivy library distribution package

Syncfusion Angular packages (>=20.2.36) have been updated to the Ivy distribution format to support the Angular Ivy rendering engine. These packages are compatible with Angular version 12 and above. To download the package, use the below command.

The Syncfusion Angular SpeechToText component is included in the @syncfusion/ej2-angular-inputs package. Install it using the following command:

npm install @syncfusion/ej2-angular-inputs --save

Angular compatibility compiled package(ngcc)

For applications using an Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion Angular components. To download the ngcc package, use the below command.

Add the @syncfusion/ej2-angular-inputs@ngcc package to the application.

npm install @syncfusion/ej2-angular-inputs@ngcc --save

To specify the ngcc package in the package.json file, add the suffix -ngcc with the package version as shown below.

@syncfusion/ej2-angular-inputs:"20.4.38-ngcc"

Note: If the ngcc tag is not specified while installing the package, the Ivy library package will be installed by default, which may cause a warning in projects using older versions of Angular.

Adding CSS reference

Add SpeechToText component’s styles as given below in style.css.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

Adding the Syncfusion SpeechToText component

Modify the app.component.ts file to apply the [ejs-speechtotext] directive to a standard HTML button element. This directive initializes the SpeechToText component with its default functionality.

import { SpeechToTextModule } from '@syncfusion/ej2-angular-inputs'
import { Component } from '@angular/core';

@Component({
    imports: [
        SpeechToTextModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<!-- To Render SpeechToText component. -->
    <div class="container" style="width: 40px; margin: 50px auto;">
        <button ejs-speechtotext></button>
    </div>`
})

export class AppComponent { }

Running the application

Run the application in the browser using the following command:

ng serve

The following example demonstrates a default SpeechToText component.

import { Component, ViewChild } from '@angular/core';

import { SpeechToTextModule, TextAreaComponent, TextAreaModule, TranscriptChangedEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [
        SpeechToTextModule, TextAreaModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<!-- To Render SpeechToText component. -->
    <div class="speechText-container">
        <button ejs-speechtotext (transcriptChanged)="onTranscriptChange($event)"></button>
        <ejs-textarea #outputTextarea id="textareaInst" value="" rows="5" cols="50" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
    </div>`
})

export class AppComponent {
    @ViewChild('outputTextarea') outputTextarea!: TextAreaComponent;
    onTranscriptChange(args: TranscriptChangedEventArgs): void {
        this.outputTextarea.value = args.transcript;
     }
}
/* You can add global styles to this file, and also import other style files */
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Angular Speech To Text</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular Speech To Text Component" />
    
<meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
<style>
    .speechText-container {
        margin: 50px auto;
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id="wrapper">
        <app-root>
            <div id='loader'>LOADING....</div>
        </app-root>
    </div>
</body>
</html>

The SpeechToText component requires an active internet connection and must be used in a browser that supports the SpeechRecognition Web Speech API.

Customizing button content

The content of the SpeechToText button can be customized for its active and inactive states. Use the content property to define the text for the start listening state and the stopContent property for the stop listening state. These properties are configured within the buttonSettings property.

The following example shows how to configure buttonSettings in the SpeechToText component.

import { Component, ViewChild } from '@angular/core';

import { SpeechToTextModule, TextAreaComponent, TextAreaModule, TranscriptChangedEventArgs, ButtonSettingsModel } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [
        SpeechToTextModule, TextAreaModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<!-- To Render SpeechToText component. -->
    <div class="speechText-container">
        <button ejs-speechtotext (transcriptChanged)="onTranscriptChange($event)" [buttonSettings]="buttonSettings"></button>
        <ejs-textarea #outputTextarea id="textareaInst" value="" rows="5" cols="50" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
    </div>`
})

export class AppComponent {
    @ViewChild('outputTextarea') outputTextarea!: TextAreaComponent;
    public buttonSettings: ButtonSettingsModel = {
        content: 'Start Listening',
        stopContent: 'Stop Listening'
     };
    onTranscriptChange(args: TranscriptChangedEventArgs): void {
        this.outputTextarea.value = args.transcript;
     }
 }
/* You can add global styles to this file, and also import other style files */
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Angular Speech To Text</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular Speech To Text Component" />
    
<meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
<style>
    .speechText-container {
        margin: 50px auto;
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="wrapper">
            <app-root>
                <div id='loader'>LOADING....</div>
            </app-root>
        </div>
    </body>
</html>