import { Component , Input , Output , EventEmitter , ElementRef } from '@angular/core' ; import { Observable } from 'rxjs/Rx' ; import 'rxjs/Observable' ; import 'rxjs/add/operator/debounceTime' ; import 'rxjs/add/operator/distinctUntilChanged' ; @ Component ( { selector : 'app-todo-header' , templateUrl : './todo-header.component.html' , styleUrls : [ './todo-header.component.css' ] } ) export class TodoHeaderComponent { inputValue : string = '' ; @ Input ( ) placeholder : string = 'What needs to be done?' ; @ Input ( ) delay : number = 300 ; @ Output ( ) textChanges = new EventEmitter < string > ( ) ; @ Output ( ) onEnterUp = new EventEmitter < string > ( ) ; constructor ( private elementRef ) { const event$ = Observable . fromEvent ( elementRef . nativeElement , 'input' ) . map ( ( ) => this . inputValue ) . filter ( input => input . trim ( ) . length > 0 ) . debounceTime ( this . delay ) . distinctUntilChanged ( ) ; event$ . subscribe ( input => this . textChanges . emit ( input ) ) ; } enterUp ( ) { if ( this . inputValue . trim ( ) . length === 0 ) return ; this . onEnterUp . emit ( this . inputValue ) ; this . inputValue = '' ; } }