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

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)