Import
import { InputInlineEditModule } from '@backbase/ui-ang/input-inline-edit'
Usage
Use the bb-input-inline-edit-ui component to turn static text into an editable field with built-in validation and confirm/cancel controls.
<!-- Basic inline edit usage -->
<bb-input-inline-edit-ui
[inputText]="'Here some text that can be modified'">
</bb-input-inline-edit-ui>
Inputs
|
Input |
Format |
Default |
|---|---|---|
|
autocomplete |
string |
'off' |
|
autofocus |
boolean |
false |
|
canEdit |
boolean |
true |
|
hasLoadingState |
boolean |
false |
|
hint |
string |
undefined |
|
inputClassName |
string |
undefined |
|
inputInlineTemplate |
TemplateRef<InputInlineEditComponent> |
undefined |
|
inputText |
string |
undefined |
|
label |
string |
'' |
|
maxLength |
number |
Infinity |
|
maxValue |
number |
undefined |
|
minLength |
number |
0 |
|
minValue |
number |
undefined |
|
pattern |
RegExp | string |
undefined |
|
patternErrorMessage |
string |
'Input value provided is invalid' |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
showCharCounter |
boolean |
false |
|
size |
number | string |
20 |
autocomplete
The autocomplete input sets the autocomplete behavior for the enclosed input when editing. Defaults to 'off'.
<!-- Inline edit with autocomplete disabled -->
<bb-input-inline-edit-ui
autocomplete="off"
[inputText]="'Editable text'">
</bb-input-inline-edit-ui>
autofocus
The autofocus input determines whether the input should be focused automatically when shown in edit mode. Defaults to false.
<!-- Inline edit that auto-focuses when editing starts -->
<bb-input-inline-edit-ui
[autofocus]="true"
[inputText]="'Editable text'">
</bb-input-inline-edit-ui>
canEdit
The canEdit input controls whether the edit button is shown. Defaults to true.
<!-- Inline edit with edit action disabled -->
<bb-input-inline-edit-ui
[canEdit]="false"
[inputText]="'Editable text'">
</bb-input-inline-edit-ui>
hasLoadingState
The hasLoadingState input enables a loading state during edit flow. Defaults to false.
<!-- Inline edit with loading state enabled -->
<bb-input-inline-edit-ui
[hasLoadingState]="true"
[inputText]="'Editable text'">
</bb-input-inline-edit-ui>
hint
The hint input displays helper text below the input in edit mode. Defaults to undefined.
<!-- Inline edit with helper text -->
<bb-input-inline-edit-ui
hint="Press Enter to accept"
[inputText]="'Editable text'">
</bb-input-inline-edit-ui>
inputClassName
The inputClassName input adds custom class names to the underlying input in edit mode. Defaults to undefined.
<!-- Inline edit with a custom input class -->
<bb-input-inline-edit-ui
inputClassName="my-input"
[inputText]="'Editable text'">
</bb-input-inline-edit-ui>
inputInlineTemplate
The inputInlineTemplate input allows providing a custom template for the idle view of the text.
<!-- Inline edit with a custom idle template -->
<ng-template #customInline let-inputText="inputText">
<span class="text-muted">{{ inputText }}</span>
</ng-template>
<bb-input-inline-edit-ui
[inputInlineTemplate]="customInline"
[inputText]="'Editable text'">
</bb-input-inline-edit-ui>
inputText
The inputText input sets the text content to display in idle mode and to edit in edit mode.
<!-- Inline edit with preset text -->
<bb-input-inline-edit-ui [inputText]="'Account nickname'"></bb-input-inline-edit-ui>
label
The label input sets the label for the inner input when in edit mode.
<!-- Inline edit with an input label shown in edit mode -->
<bb-input-inline-edit-ui
label="Nickname"
[inputText]="'Editable text'">
</bb-input-inline-edit-ui>
maxLength
The maxLength input sets the maximum number of characters allowed. Defaults to Infinity.
<!-- Inline edit with max length -->
<bb-input-inline-edit-ui
[maxLength]="50"
[inputText]="'Editable text'">
</bb-input-inline-edit-ui>
maxValue
The maxValue input sets the maximum numeric value when using numeric validation. Defaults to undefined.
<!-- Inline edit with maximum value constraint -->
<bb-input-inline-edit-ui
[maxValue]="100"
[inputText]="'42'">
</bb-input-inline-edit-ui>
minLength
The minLength input sets the minimum number of characters required. Defaults to 0.
<!-- Inline edit with minimum length -->
<bb-input-inline-edit-ui
[minLength]="3"
[inputText]="'Editable text'">
</bb-input-inline-edit-ui>
minValue
The minValue input sets the minimum numeric value when using numeric validation. Defaults to undefined.
<!-- Inline edit with minimum value constraint -->
<bb-input-inline-edit-ui
[minValue]="0"
[inputText]="'42'">
</bb-input-inline-edit-ui>
pattern
The pattern input sets a custom validation pattern applied during edit mode.
<!-- Inline edit with a custom validation pattern (alphanumeric only) -->
<bb-input-inline-edit-ui
[pattern]="'^[a-zA-Z0-9]+$'"
[inputText]="'EditableText123'">
</bb-input-inline-edit-ui>
patternErrorMessage
The patternErrorMessage input customizes the error message displayed when pattern validation fails.
<!-- Inline edit with a custom pattern error message -->
<bb-input-inline-edit-ui
[pattern]="'^[a-zA-Z0-9]+$'"
patternErrorMessage="Only letters and numbers allowed"
[inputText]="'EditableText123'">
</bb-input-inline-edit-ui>
readonly
The readonly input prevents editing when set to true. Defaults to false.
<!-- Inline edit in read-only mode -->
<bb-input-inline-edit-ui
[readonly]="true"
[inputText]="'Editable text'">
</bb-input-inline-edit-ui>
required
The required input marks the inner input as required. Defaults to false.
<!-- Inline edit with required validation -->
<bb-input-inline-edit-ui
[required]="true"
[inputText]="'Editable text'">
</bb-input-inline-edit-ui>
showCharCounter
The showCharCounter input shows a character counter based on maxLength. Defaults to false.
<!-- Inline edit with character counter -->
<bb-input-inline-edit-ui
[showCharCounter]="true"
[maxLength]="50"
[inputText]="'Editable text'">
</bb-input-inline-edit-ui>
size
The size input configures the minimum width to fit the specified number of characters. Defaults to 20.
<!-- Inline edit with a wider input size -->
<bb-input-inline-edit-ui
[size]="30"
[inputText]="'Editable text'">
</bb-input-inline-edit-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
accept |
EventEmitter<string> |
Emitted with the edited value on accept |
|
blur |
EventEmitter<FocusEvent> |
Emitted when the input loses focus |
|
cancel |
EventEmitter<void> |
Emitted when cancel is clicked |
|
focus |
EventEmitter<FocusEvent> |
Emitted when the input gains focus |
|
stateChange |
EventEmitter<InputInlineEditState> |
Emitted when the edit state changes |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
ariaActivedescendant |
Identifies the currently active element when focus is on a composite widget |
string |
|
ariaControls |
Indicates which element(s) the widget controls |
string |
|
ariaDescribedby |
References the element that describes the widget |
string |
|
ariaExpanded |
Indicates if the control is expanded or collapsed |
string |
|
ariaInvalid |
Indicates the entered value is not in the expected format |
string |
|
ariaLabel |
Sets an accessible label for the edit button or input |
string |
|
ariaLabelledby |
References elements that provide an accessible name |
string |
|
ariaOwns |
Identifies elements as part of a parent-child relationship |
string |
|
role |
Sets the ARIA role for the input |
string |