import { Directive , ElementRef , HostListener , Renderer2 } from '@angular/core' ; @ Directive ( { selector : '[cancelable]' } ) export class CancelableDirective { private originalValue : string ; constructor ( private elementRef , private renderer ) { } @ HostListener ( 'focus' ) onFocus ( ) { this . originalValue = this . elementRef . nativeElement . value ; } @ HostListener ( 'keyup.escape' ) onEscape ( ) { this . renderer . setProperty ( this . elementRef . nativeElement , 'value' , this . originalValue ) ; this . elementRef . nativeElement . blur ( ) ; } }