Getting Started with Angular Smart TextArea Component
24 Jul 202617 minutes to read
The Smart TextArea is an advanced component designed to elevate the text input experience by providing intelligent autocomplete suggestions for entire sentences through text-generative AI functionality. This component enhances user productivity by predicting and offering relevant completions based on the context of what is being typed.
This section briefly explains how to create a simple Smart TextArea and demonstrate the basic functionalities of the Smart TextArea component in an Angular environment.
Prerequisites
Dependencies
The following list of dependencies are required to use the Smart TextArea component in your application.
|-- @syncfusion/ej2-angular-inputs
|-- @syncfusion/ej2-angular-base
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-baseSetting up Angular environment
Users can use the Angular CLI to set up their Angular applications. To install Angular CLI, use the following command.
npm install -g @angular/cliCreating an Angular application
Start a new Angular application using the following Angular CLI command.
ng new my-app
cd my-appInstalling Syncfusion® Inputs Package
Syncfusion® packages are distributed on npm as @syncfusion scoped packages. You can get all the Angular Syncfusion® packages from npm link.
Currently, Syncfusion® provides two types of package structures for Angular components,
- Ivy library distribution package format
- Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.
Ivy library distribution package
Syncfusion® Angular packages (>=20.2.36) have been moved to the Ivy distribution to support the Angular Ivy rendering engine, and the packages are compatible with Angular version 12 and above. To download the package, use the following command.
Add @syncfusion/ej2-angular-inputs package to the application.
npm install @syncfusion/ej2-angular-inputs --saveAngular compatibility compiled package(ngcc)
For Angular versions below 12, you can use the legacy ngcc package of the Syncfusion® Angular components. To download the ngcc package, use the following command.
Add @syncfusion/ej2-angular-inputs@ngcc package to the application.
npm install @syncfusion/ej2-angular-inputs@ngcc --saveTo mention the ngcc package in the package.json file, add the -ngcc suffix to the package version as shown below.
@syncfusion/ej2-angular-inputs:"20.2.38-ngcc"NOTE
If the ngcc tag is not specified while installing the package, the Ivy library package will be installed and will throw a warning.
Adding CSS reference
Themes for Syncfusion® Angular components can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.
This example uses the Tailwind 3 theme for the Smart TextArea component from the theme package. To install the Tailwind 3 theme package, use the following command:
npm install @syncfusion/ej2-tailwind3-theme --saveAdd the Smart TextArea component’s styles in styles.css as shown below.
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/textarea/index.css";Adding the Smart TextArea to the application
Modify the template in the [src/app/app.component.ts] file to render the Smart TextArea component. Add the Smart TextArea component by using the <ejs-smarttextarea> selector in the template section of the app.component.ts file. In Smart TextArea, the aiSuggestionHandler property sends prompts to the AI model and receives context-aware suggestions. These suggestions appear inline for non-touch devices and as an overlay popup for touch devices by default, helping users type faster and more accurately.
import { SmartTextAreaModule, ChatParameters } from '@syncfusion/ej2-angular-inputs';
import { Component } from '@angular/core';
@Component({
imports: [
SmartTextAreaModule
],
standalone: true,
selector: 'app-root',
// specifies the template string for the Kanban component
template: `<ejs-smarttextarea id="smart-textarea" #textareaObj placeholder="Enter your queries here" floatLabelType="Auto" rows="5" userRole="Employee communicating with internal team" [UserPhrases]="defaultPreset"
[aiSuggestionHandler]="serverAIRequest"></ejs-smarttextarea>`
})
export class AppComponent {
public rolesData: string[] = [
"Maintainer of an open-source project replying to GitHub issues",
"Employee communicating with internal team",
"Customer support representative responding to customer queries",
"Sales representative responding to client inquiries"
];
public serverAIRequest = async (settings: ChatParameters) => {
let output = '';
try {
const response = await getAzureChatAIRequest(settings) as string;
output = response;
} catch (error) {
console.error("Error:", error);
}
return output;
};
public defaultPreset: string[] = [
"Please find the attached report.",
"Let's schedule a meeting to discuss this further.",
"Can you provide an update on this task?",
"I appreciate your prompt response.",
"Let's collaborate on this project to ensure timely delivery."
];
}Running the application
- Run the application in the browser using the following command:
ng serve- The following example shows the Smart TextArea component, and users can integrate any text-generative AI of their choice.
<div class="control-section" id="default">
<div class="content-wrapper">
<div class="example-label">Select a role</div>
<div style="width: 80%;">
<ejs-dropdownlist id="smart-dropdown" placeholder="Select a role" id='dropdownlist' [dataSource]='rolesData'
value="Maintainer of an open-source project replying to GitHub issues" popupHeight="200px"
(change)="dropDownChange($event)"></ejs-dropdownlist>
</div>
<br />
<div style="width:80%;">
<ejs-smarttextarea id="smart-textarea" #textareaObj placeholder="Enter your queries here" floatLabelType="Auto" rows="5"
userRole="Employee communicating with internal team" [UserPhrases]="defaulPreset" (created)="created()"
[aiSuggestionHandler]="serverAIRequest"
></ejs-smarttextarea>
</div>
</div>
</div>import { Component, ViewChild } from '@angular/core';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { SmartTextAreaComponent, SmartTextAreaModule, ChatParameters } from '@syncfusion/ej2-angular-inputs';
import { getAzureChatAIRequest } from './ai-models';
@Component({
selector: 'app-smart-text-area',
standalone: true,
imports: [DropDownListAllModule, SmartTextAreaModule],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class SmartTextArea {
@ViewChild('textareaObj') public textareaObj!: SmartTextAreaComponent;
public rolesData: string[] = [
"Maintainer of an open-source project replying to GitHub issues",
"Employee communicating with internal team",
"Customer support representative responding to customer queries",
"Sales representative responding to client inquiries"
];
public serverAIRequest = async (settings: ChatParameters) => {
let output = '';
try {
console.log(settings);
const response = await getAzureChatAIRequest(settings) as string;
console.log("Success:", response);
output = response;
} catch (error) {
console.error("Error:", error);
}
return output;
};
public presets: any = [
{
userRole: "Maintainer of an open-source project replying to GitHub issues",
userPhrases: [
"Thank you for contacting us.",
"To investigate, we'll need a repro as a public Git repo.",
"Could you please post a screenshot of NEED_INFO?",
"This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.",
"We don't accept ZIP files as repros."
]
},
{
userRole: "Customer support representative responding to customer queries",
userPhrases: [
"Thank you for reaching out to us.",
"Can you please provide your order number?",
"We apologize for the inconvenience.",
"Our team is looking into this issue and will get back to you shortly.",
"For urgent matters, please call our support line."
]
},
{
userRole: "Employee communicating with internal team",
userPhrases: [
"Please find the attached report.",
"Let's schedule a meeting to discuss this further.",
"Can you provide an update on this task?",
"I appreciate your prompt response.",
"Let's collaborate on this project to ensure timely delivery."
]
},
{
userRole: "Sales representative responding to client inquiries",
userPhrases: [
"Thank you for your interest in our product.",
"Can I schedule a demo for you?",
"Please find the pricing details attached.",
"Our team is excited to work with you.",
"Let me know if you have any further questions."
]
}
];
public width: string = '80%';
public defaulPreset: string[] = [
"Please find the attached report.",
"Let's schedule a meeting to discuss this further.",
"Can you provide an update on this task?",
"I appreciate your prompt response.",
"Let's collaborate on this project to ensure timely delivery."
];
public dropDownChange(args: any): void {
let selectedRole: string = args.value;
let selectedPreset: any = this.presets.find((preset: any) => preset.userRole === selectedRole);
this.textareaObj.userRole = selectedRole;
this.textareaObj.UserPhrases = selectedPreset.userPhrases;
}
}import { generateText } from "ai"
import { createGoogleGenerativeAI } from '@ai-sdk/google';
import { createAzure } from '@ai-sdk/azure';
import { createOpenAI } from '@ai-sdk/openai';
//Warning: Do not expose your API key in the client-side code. This is only for demonstration purposes.
const google = createGoogleGenerativeAI({
baseURL: "https://generativelanguage.googleapis.com/v1beta",
apiKey: "API_KEY"
});
const azure = createAzure({
resourceName: 'RESOURCE_NAME',
apiKey: 'API_KEY',
});
const groq = createOpenAI({
baseURL: 'https://api.groq.com/openai/v1',
apiKey: 'API_KEY',
});
const aiModel = azure('MODEL_NAME'); // Update the model here
export async function getAzureChatAIRequest(options: any) {
try {
const result = await generateText({
model: aiModel,
messages: options.messages,
topP: options.topP,
temperature: options.temperature,
maxTokens: options.maxTokens,
frequencyPenalty: options.frequencyPenalty,
presencePenalty: options.presencePenalty,
stopSequences: options.stopSequences
});
return result.text;
} catch (err) {
console.error("Error occurred:", err);
return null;
}
}- Type ‘To investigate’ to experience instant sentence autocompletion.
