import { Directive , ElementRef , EventEmitter , Output , Input } from 'angular2/core' ; Example @ Directive ( { selector : 'button[loading-btn]' , host : { '[disabled]' : '_loading' } } ) export class LoadingBtn { @ Input ( ) public loadingText : string = 'Loading...' ; private _loading : boolean = false ; private _originalText : string ; @ Output ( ) private sampleCustomEvent = new EventEmitter ( ) ; constructor ( private _elRef ) { this . _originalText = this . _elRef . nativeElement . innerText ; } toggleText ( ) { if ( this . _loading ) { this . _elRef . nativeElement . innerText = this . loadingText ; } else { this . _elRef . nativeElement . innerText = this . _originalText ; } } @ Input ( 'loadingMore' ) set loading ( v ) { this . sampleCustomEvent . emit ( `Button is ${ v ? '' : 'not ' }loading.` ) ; this . _loading = v ; this . toggleText ( ) ; } }