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

Tab and Shift+Tab move between controls. Enter or Space activates buttons. Inputs have labels, actions show focus, and status or error changes are announced.

Paste into the textarea normally. Review the proposed fields, select the values to accept and activate Apply. Nothing updates the target form before that action.