angular-nevera-generator/generators/todoMVC/inject/templates/src/app/components/MainSection.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

class MainSection {
  selectedFilter: Function;
  filter: string;
  completeReducer: Function;
  todos: any[];

  /** @ngInject */
  constructor(public todoService: TodoService) {
    this.selectedFilter = visibilityFilters[this.filter];
    this.completeReducer = (count: number, todo: Todo): number => todo.completed ? count + 1 : count;
  }

  handleClearCompleted() {
    this.todos = this.todoService.clearCompleted(this.todos);
  }

  handleCompleteAll() {
    this.todos = this.todoService.completeAll(this.todos);
  }

  handleShow(filter: string) {
    this.filter = filter;
    this.selectedFilter = visibilityFilters[filter];
  }

  handleChange(id: number) {
    this.todos = this.todoService.completeTodo(id, this.todos);
  }

  handleSave(e: any) {
    if (e.text.length === 0) {
      this.todos = this.todoService.deleteTodo(e.id, this.todos);
    } else {
      this.todos = this.todoService.editTodo(e.id, e.text, this.todos);
    }
  }

  handleDestroy(e: any) {
    this.todos = this.todoService.deleteTodo(e, this.todos);
  }
}

angular
  .module('app')
  .component('mainSection', {
    templateUrl: 'app/components/MainSection.html',
    controller: MainSection,
    bindings: {
      todos: '=',
      filter: '<'
    }
  });