Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Inline Text Edit

Inline Text Edit lets users edit already visible text directly in place. It uses a contenteditable host, emits the new trimmed text through contentChanged, saves on Enter or blur, and cancels the current edit on Escape.

Use it for quick rename and edit-in-place flows such as project names, task names, card titles, table labels, short descriptions, headings, and other small pieces of text where opening a separate form would be too heavy.

Do not use Inline Text Edit for normal labeled forms, validation-heavy fields, textarea workflows, rich text, comments, replies, large documents, value selection, or complex save/cancel flows with explicit buttons. Use FormField with Input, Textarea, TextEditor, ContentEditor, CommentEditor, Select, or a custom form for those cases.

Key features:
  • Edits the text directly where it is displayed.
  • Supports placeholder text for empty content.
  • Can delay contentChanged emissions with the delay input.
  • Saves on Enter or blur and cancels on Escape.
PropTypeDefault
enabled
Whether the component is enabled for editing
booleantrue
placeholder
The placeholder text to display when the content is empty
string''
delay
The delay in milliseconds before emitting the contentChanged event
number0
EventDescription
contentChangedEmitted when the content has been changed and confirmed (on blur or enter)