File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
value
|
Type : string | null
|
Default value : null
|
|
|
Methods
|
handleDataUpdated
|
handleDataUpdated()
|
|
|
|
|
|
inputControl
|
Type : UntypedFormControl
|
Default value : new UntypedFormControl(null)
|
|
|
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'edit-text',
templateUrl: './edit-text.component.html',
styleUrls: ['./edit-text.component.scss'],
standalone: false
})
export class EditTextComponent implements OnChanges {
@Input() value: string | null = null;
@Output() update = new EventEmitter();
inputControl: UntypedFormControl = new UntypedFormControl(null);
handleDataUpdated() {
const newValue = this.inputControl.value;
if (newValue !== this.value) {
this.update.emit(newValue);
}
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['value']) {
this.inputControl.setValue(changes['value'].currentValue, { emitEvent: false });
}
}
}
<acl-editable (editComplete)="handleDataUpdated()">
<ng-template aclViewMode>
<span>{{ value || '-' }}</span>
</ng-template>
<ng-template aclEditMode>
<input type="text" focusable [formControl]="inputControl" />
</ng-template>
</acl-editable>
@use '../../inspector.colors' as *;
:host {
display: block;
overflow: hidden;
}
input {
background-color: $debug-color-dark;
color: #fff;
width: 100%;
height: 24px;
line-height: 18px;
vertical-align: middle;
outline: none;
border: 1px solid $debug-color-light;
padding: 1px 3px;
}
Legend
Html element with directive