Angular Smart Paste Button

Overview

The Angular Smart Paste Button is an AI-powered enhancement of Syncfusion’s Button component, enabling intelligent clipboard pasting with contextual accuracy and proper formatting to boost productivity.

AI-enhanced clipboard

The Smart Paste Button scans clipboard content before pasting to ensure relevance to the current context, eliminating manual formatting. It automatically detects form fields (<input>, <select>, <textarea>) within your <form> elements and generates descriptions from associated <label> tags, name attributes, or nearby text.

Annotating form fields

Enhance AI precision by customizing form component attributes, allowing you to provide specific instructions for the language model. This results in more accurate and context-aware field values.

```html
<input data-smartpaste-description="The user's vehicle registration number, formatted as XYZ-123." />

<textarea data-smartpaste-description="The job description should begin with the job title in all caps, followed by a paragraph of text."></textarea>

<input type="checkbox" data-smartpaste-description="Check if the product description indicates suitability for children; otherwise, uncheck" />
```

Inherited Features

Since it’s built on top of Syncfusion’s Angular Button component, the Smart Paste Button inherits all the features of the Button component, including predefined styles, icons, and customizable styling.

Built-in themes

The Angular Smart Paste Button control supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by overriding SASS variables or using the Theme Studio application.

• Theme Studio application

Other supported frameworks

The Smart Paste Button is also available in Blazor, React, Vue, and JavaScript frameworks. Check out the different Smart Paste Button platforms at the links below:

• Blazor Smart Paste Button
• React Smart Paste Button
• Vue Smart Paste Button
• JavaScript Smart Paste Button

Angular version compatibility

With continuous improvement in Angular versions, the Angular Smart Paste Button is kept up to date to make it compatible with the latest version.

Web accessibility

• Fully supports WAI-ARIA accessibility practices to work with screen readers and assistive devices.
• Follows WAI-ARIA best practices for implementing keyboard interaction.
• Bases UI element visuals, such as foreground color, background color, line spacing, text, and images, on WCAG 2.0 standards.
• Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.

Angular Smart Paste Button code example

Get started with the Angular Smart Paste Button using just a few lines of HTML and TS code as demonstrated below. Also explore our Angular Smart Paste Button example that shows you how to render and configure a Smart Paste Button in Angular.

<div class="control-section">
    <button ejs-smart-paste-button id="smart-paste" type="button" [aiAssistHandler]="serverAIRequest" content="Smart Paste" iconCss="e-icons e-paste"></button>
</div>

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

@Component({
    selector: 'app-root',
    template: `<!-- To render Smart Paste Button. -->
    <button ejs-smart-paste-button id="smart-paste" type="button" [aiAssistHandler]="serverAIRequest" content="Smart Paste" iconCss="e-icons e-paste"></button>
})
export class AppComponent { }