Smart Paste

Turn pasted notes into proposed field values, then review, edit, and select what to apply.

Available in ngbootstrap 2.2.0. All examples below simulate responses locally; no model or network request is used.

Theme Fail next request

Fill from a note

Review before applying

Paste source text

Paste a note, then review the proposed field values here.

Applied contact details

Customer: Not set
Email: Not set
Order reference: Not set

This demo parses labeled lines such as Customer: and Email:. In your app, supply proposals from your own extraction service, then validate accepted values before updating a form.

Core component binding. Task modes, document selection, source notes, and final output previews are application UI composed around these components.

      <ngb-smart-paste
  [fields]="fields()" [suggestions]="proposals()"
  [busy]="pending()" [error]="error()"
  (mappingRequest)="extractFields($event)" (stop)="cancel()"
  (valuesApply)="applyReviewedValues($event)" />

No action yet.

When to use it

Review proposed contact fields from a pasted customer note.
Fill an intake form while keeping the operator in control.

Inputs and events

Smart Paste public API
Member	Type	Behavior
`fields`	`readonly NgbSmartPasteField[]`	Allowed field keys, labels, and optional current string values.
`source / sourceChange`	`string / string`	Optional two-way source text. No automatic clipboard access.
`suggestions`	`readonly NgbSmartPasteSuggestion[]`	Proposed field/value strings; unknown fields are ignored.
`busy / disabled / error`	`boolean / boolean / string`	Extraction lifecycle.
`label / emptyText`	`string`	Panel title and empty state.
`mappingRequest`	`NgbSmartPasteRequest`	Pasted text plus a copied field schema.
`valuesApply`	`readonly NgbSmartPasteSuggestion[]`	Only selected, reviewed values. Application validates and applies them.
`stop`	`void`	Request application cancellation.

Use stable unique message, response, and field IDs. Update input arrays immutably for OnPush rendering. Model outputs render as plain text, including code and HTML; Markdown rendering and attachments are not part of this API.

Connect your backend

This request sketch belongs in your application service. Adapt its endpoint and response schema to your backend; it is not a built-in ngbootstrap endpoint. Set busy immediately, handle errors, and discard results from canceled or superseded requests.

      // Application-owned service call. Keep provider credentials on your server.
const controller = new AbortController();
const response = await fetch('/api/assistant', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ prompt }),
  signal: controller.signal,
});
if (!response.ok) throw new Error('Request failed');
const result: unknown = await response.json();
// Validate result before updating the component's messages or responses.
// On Stop or destruction: controller.abort(); ignore stale request IDs.
// Set busy/error from your request lifecycle; the components do not fetch.

Keyboard and review behavior

Controls use native buttons, labeled inputs, visible focus indicators, and status or error announcements. Tab and Shift+Tab move between controls; Enter or Space activates native buttons. Busy prompts keep the input read-only and the Stop action reachable without replacing the action button. Prompt Box supports Enter to submit and Shift+Enter for a new line, while respecting text composition. Inline Prompt closes with Escape and returns focus to its trigger. Generated drafts have a named, keyboard-focusable scroll region. Inline and paste proposals announce when they are ready. Smart Paste uses ordinary paste into a textarea and requires explicit selection and application of proposed values.