angular-nevera-generator/generators/todoMVC/modules/templates/src/app/components/TodoTextInput.ts

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

import {TodoService} from '../todos/todos';

class TodoTextInputController {
  editing: boolean;
  text: string;
  newTodo: boolean;
  onSave: Function;

<% if (modules === 'webpack') { -%>
  /** @ngInject */
<% } -%>
  constructor(public todoService: TodoService, public $window: any, public $timeout: any) {
    this.editing = this.editing || false;
    this.text = this.text || '';
    if (this.text.length) {
      this.focus();
    }
  }

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

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

  focus() {
    this.$timeout(() => {
      const element = this.$window.document.querySelector('.editing .textInput');
      if (element) {
        element.focus();
      }
    }, 0);
  }
}

export const TodoTextInput: angular.IComponentOptions = {
<% if (modules === 'systemjs') { -%>
  templateUrl: 'app/components/TodoTextInput.html',
  controller: ['todoService', '$window', '$timeout', TodoTextInputController],
<% } else { -%>
  template: require('./TodoTextInput.html'),
  controller: TodoTextInputController,
<% } -%>
  bindings: {
    onSave: '&',
    placeholder: '@',
    newTodo: '@',
    editing: '@',
    text: '<'
  }
};