import { Component , Input , ElementRef , ViewChild , Renderer , forwardRef , OnInit } from '@angular/core' ; import { ControlValueAccessor , NG_VALUE_ACCESSOR } from '@angular/forms' ; const INLINE_EDIT_CONTROL_VALUE_ACCESSOR = { provide : NG_VALUE_ACCESSOR , useExisting : forwardRef ( ( ) => InlineEditComponent ) , multi : true } ; @ Component ( { selector : 'app-inline-edit' , templateUrl : './inline-edit.component.html' , providers : [ INLINE_EDIT_CONTROL_VALUE_ACCESSOR ] , styleUrls : [ './inline-edit.component.css' ] } ) export class InlineEditComponent implements ControlValueAccessor , OnInit { @ ViewChild ( 'inlineEditControl' ) inlineEditControl : ElementRef ; @ Input ( ) label : string = '' ; @ Input ( ) type : string = 'text' ; @ Input ( ) required : boolean = false ; @ Input ( ) disabled : boolean = false ; private _value : string = '' ; private preValue : string = '' ; private editing : boolean = false ; public onChange : any = Function . prototype ; public onTouched : any = Function . prototype ; get value ( ) : any { return this . _value ; } set value ( v ) { if ( v !== this . _value ) { this . _value = v ; this . onChange ( v ) ; } } constructor ( element , private _renderer ) { } writeValue ( value ) { this . _value = value ; } public registerOnChange ( fn ) { this . onChange = fn ; } public registerOnTouched ( fn ) { this . onTouched = fn ; } onBlur ( $event ) { this . editing = false ; } edit ( value ) { if ( this . disabled ) { return ; } this . preValue = value ; this . editing = true ; setTimeout ( _ => this . _renderer . invokeElementMethod ( this . inlineEditControl , 'focus' , [ ] ) ) ; } ngOnInit ( ) { } }