Inline editor

The inline editor is used to make text editable. It uses nested buttons and the input field component.

´ Loading interactive demo...
<em dt-inline-editor [(ngModel)]="sampleModel"> </em> <span>model: <code>{{ sampleModel }}</code></span> export class DefaultInlineEditorExample { sampleModel = 'text content'; } model: {{ sampleModel }} export class DefaultInlineEditorExample { sampleModel = 'text content'; }

Inline editing is indicated by the edit icon used in the nested button next to the editable text.

The checkmark icon and abort icon used in the nested button save/discard the changes. While the cursor is in the input field, the enter key triggers saving it. On focus loss of the inline editing input field, the typed input will be autosaved.

Inline Editor

´ Loading interactive demo...
<em dt-inline-editor [(ngModel)]="sampleModel"> </em> <span>model: <code>{{ sampleModel }}</code></span> export class DefaultInlineEditorExample { sampleModel = 'text content'; } model: {{ sampleModel }} export class DefaultInlineEditorExample { sampleModel = 'text content'; }

dt-inline-editor is a directive that makes any text containing HTML element editable.

Imports

You have to import the DtInlineEditorModule when you want to use dt-inline-editor:


@NgModule({
  imports: [
    DtInlineEditorModule,
  ],
})
class MyModule {}

Initialization

To apply, add the dt-inline-editor attribute to the HTML element.

Options & Properties

Name Type Default Description
ngModel string `` The two-way data-binding to set the content and handle changes.
required boolean false To specify that the input field must be filled out
errorMessage string Value cannot be empty! Error message to be displayed incase of empty input
onRemoteSave function `` A callback returning an Observable that will be triggered when the (potentially async) saving of the new value has finished. The inline editor needs to be notified so it can go back to idle state if ok or stay in editing mode if failed.

Examples

JavaScript API

´ Loading interactive demo...
<em #sampleEditor dt-inline-editor [(ngModel)]="sampleModel"></em> <button (click)="sampleEditor.enterEditing()">open editor</button> <button (click)="sampleEditor.saveAndQuitEditing()">save changes</button> <button (click)="sampleEditor.cancelAndQuitEditing()">cancel changes</button> export class ApiInlineEditorExample { @ViewChild('sampleEditor') sampleEditor: DtInlineEditor; sampleModel = 'text content'; } export class ApiInlineEditorExample { @ViewChild('sampleEditor') sampleEditor: DtInlineEditor; sampleModel = 'text content'; }

Required field validation

´ Loading interactive demo...
<em dt-inline-editor required [(ngModel)]="sampleModel"> <dt-error>Empty value not accepted!</dt-error> </em> <span>model: <code>{{ sampleModel }}</code></span> export class RequiredInlineEditorExample { sampleModel = 'text content'; } Empty value not accepted! model: {{ sampleModel }} export class RequiredInlineEditorExample { sampleModel = 'text content'; }

Error messages can be shown under the form field by adding <dt-error> elements inside the inline editor. Errors are hidden initially and will be displayed on invalid form fields, after the user has interacted with the element or the parent form has been submitted. The errors will appear on top of the hint labels and will overlap them.

If a form field can have more than one error state, it is up to the consumer to toggle which messages should be displayed. This can be done with ngIf or ngSwitch.

Successful asynchronous operation

´ Loading interactive demo...
<em dt-inline-editor [(ngModel)]="sampleModel" [onRemoteSave]="successfulSaveFunction"></em> export class SuccessfulInlineEditorExample { sampleModel = 'text content'; successfulSaveFunction(): Observable<void> { return new Observable<void>((observer) => { setTimeout( () => { observer.next(); observer.complete(); }, TIMEOUT_MS); }); } } export class SuccessfulInlineEditorExample { sampleModel = 'text content'; successfulSaveFunction(): Observable { return new Observable((observer) => { setTimeout( () => { observer.next(); observer.complete(); }, TIMEOUT_MS); }); } }

Failing asynchronous operation

´ Loading interactive demo...
<em dt-inline-editor [(ngModel)]="sampleModel" [onRemoteSave]="failingSaveFunction"></em> export class FailingInlineEditorExample { sampleModel = 'text content'; failingSaveFunction(): Observable<void> { return new Observable<void>((observer) => { setTimeout( () => { observer.error(); }, TIMEOUT_MS); }); } } export class FailingInlineEditorExample { sampleModel = 'text content'; failingSaveFunction(): Observable { return new Observable((observer) => { setTimeout( () => { observer.error(); }, TIMEOUT_MS); }); } }