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

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

<li [ngClass]="{'editing': editing, 'completed': todo?.completed}">
  <fountain-todo-text-input
    *ngIf="editing"
    [text]="todo?.text"
    [editing]="editing"
    (onSave)="handleSave($event)"
    ></fountain-todo-text-input>
  <div class="view" *ngIf="!editing">
    <input
      class="toggle"
      type="checkbox"
      [checked]="todo?.completed"
      (click)="handleChange()"
      />
    <label (dblclick)="handleDoubleClick()">{{todo?.text}}</label>
    <button class="destroy" (click)="handleClick()"></button>
  </div>
</li>