generator-fountain-angular2/generators/todoMVC/templates/src/app/components/TodoItem.ts

Yeoman Fountain generator to scaffold a webapp with Angular 2 written in ES6 (Babel), TypeScript through Webpack or SystemJS including tools Gulp 4, ESLint, Browsersync and Karma

import {Component, Input, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'fountain-todo-item',
  template: require('./TodoItem.html')
})
export class TodoItemComponent {
  @Input() todo: any;
  @Output() onDestroy: EventEmitter<any> = new EventEmitter(false);
  @Output() onSave: EventEmitter<any> = new EventEmitter(false);
  @Output() onChange: EventEmitter<any> = new EventEmitter(false);
  editing: boolean = false;

  handleSave(text: string) {
    this.onSave.emit({id: this.todo.id, text});
    this.editing = false;
  }

  handleChange() {
    this.onChange.emit(this.todo.id);
  }

  handleDoubleClick() {
    this.editing = true;
  }

  handleClick() {
    this.onDestroy.emit(this.todo.id);
  }
}