import { Directive , ElementRef , EventEmitter , HostListener , Inject , Input , OnInit , Output , Renderer2 } from '@angular/core' ; import { NodeEditableEvent , NodeEditableEventAction } from './editable.events' ; @ Directive ( { selector : '[nodeEditable]' } ) export class NodeEditableDirective implements OnInit { @ Input ( 'nodeEditable' ) public nodeValue : string ; @ Output ( ) public valueChanged : EventEmitter < NodeEditableEvent > = new EventEmitter < NodeEditableEvent > ( false ) ; public constructor ( @ Inject ( Renderer2 ) private renderer , @ Inject ( ElementRef ) private elementRef ) { } public ngOnInit ( ) { const nativeElement = this . elementRef . nativeElement ; if ( nativeElement ) { nativeElement . focus ( ) ; } this . renderer . setProperty ( nativeElement , 'value' , this . nodeValue ) ; } @ HostListener ( 'keyup.enter' , [ '$event.target.value' ] ) public applyNewValue ( newNodeValue ) { this . valueChanged . emit ( { type : 'keyup' , value : newNodeValue } ) ; } @ HostListener ( 'blur' , [ '$event.target.value' ] ) public applyNewValueByLoosingFocus ( newNodeValue ) { this . valueChanged . emit ( { type : 'blur' , value : newNodeValue } ) ; } @ HostListener ( 'keyup.esc' ) public cancelEditing ( ) { this . valueChanged . emit ( { type : 'keyup' , value : this . nodeValue , action : NodeEditableEventAction . Cancel } ) ; } }