generator-fountain-angular2/generators/todoMVC/templates/src/app/components/TodoTextInput.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, ElementRef, Renderer, ViewChild, AfterViewInit} from '@angular/core';

@Component({
  selector: 'fountain-todo-text-input',
  template: require('./TodoTextInput.html'),
})
export class TodoTextInputComponent implements AfterViewInit {
  @ViewChild('myInput') input: ElementRef;
  @Input() newTodo: boolean;
  @Input() editing: boolean;
  @Input() placeholder: string = '';
  @Output() onSave: EventEmitter<any> = new EventEmitter(false);
  @Input() text: string = '';

  constructor(private renderer: Renderer) {}

  ngAfterViewInit() {
    this.renderer.invokeElementMethod(this.input.nativeElement, 'focus', []);
  }

  handleBlur() {
    if (!this.newTodo) {
      this.onSave.emit(this.text);
    }
  }

  handleSubmit(e: any) {
    if (e.keyCode === 13) {
      this.onSave.emit(this.text);
      if (this.newTodo) {
        this.text = '';
      }
    }
  }
}