import { Component , Input , Output , EventEmitter , ChangeDetectionStrategy , KeyValueDiffers , KeyValueDiffer , ElementRef } from '@angular/core' ; import { TodoItemModel } from './TodoService' ; @ Component ( { selector : 'todo-item' , template : `
                <div class="view">
                    <input [(ngModel)]="_item.task" class="editInput" *ngIf="editMode" value="{{_item.task}}"/>
                    <label  *ngIf="!editMode">{{_item.getKey('task')}}</label>
                    <button (click)="doneClicked()"  class="fa fa-minus buttonsDone"></button>
                    <button (click)="editClicked()" [ngClass]="{'fa-check-square': editMode}" class="fa fa-edit buttonsEdit"></button>
                    <button style="position: relative; left: -80px; top: -62px" class="pull-right fa fa-arrows-v buttonsEdit"></button>
                </div>
    ` , styleUrls : [ './Todoitem.css' ] , changeDetection : ChangeDetectionStrategy . OnPush } ) export class TodoItem { constructor ( private differs , private el ) { this . differ = differs . find ( [ ] ) . create ( null ) ; } /**
     * Use KeyValueDiffers to generate KeyValueChangeRecord of each change
     * using the ngDoCheck life cycle hook
     */ ngDoCheck ( ) { var changes = this . differ . diff ( this . _item ) ; if ( changes ) { changes . forEachAddedItem ( r => console . log ( 'added' , r ) ) ; changes . forEachRemovedItem ( r => console . log ( 'removed' , r ) ) ; changes . forEachChangedItem ( r => console . log ( 'changed' , r ) ) ; } } private differ : KeyValueDiffer < any , any > ; private editMode = false ; private _item : TodoItemModel ; @ Input ( ) set item ( value ) { this . _item = value ; } @ Output ( ) done = new EventEmitter ( ) ; @ Output ( ) edit = new EventEmitter ( ) ; doneClicked ( ) { this . done . emit ( this . _item ) ; } /**
     * demonstate passing data to ancestor component via the DOM tree
     */ dispatchViaDom ( ) { this . el . nativeElement . dispatchEvent ( new CustomEvent ( 'toggle-edited' , { detail : { todo : 'foo' , source : this } , bubbles : true } ) ) ; } editClicked ( ) { this . editMode = ! this . editMode ; if ( this . editMode ) return ; this . edit . emit ( this . _item ) ; this . dispatchViaDom ( ) ; } }