generator-fountain-angular2/generators/todoMVC/templates/src/app/components/MainSection.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

<section class="main">
  <input *ngIf="(todos | async)?.length"
    class="toggle-all"
    type="checkbox"
    [checked]="(completedCount | async) === (todos | async)?.length"
    (click)="handleCompleteAll()"
    />
  <ul class="todo-list">
    <template ngFor let-todo [ngForOf]="(filteredTodos | async)">
      <fountain-todo-item
        [todo]="todo"
        (onDestroy)="handleDestroy($event)"
        (onChange)="handleChange($event)"
        (onSave)="handleSave($event)"
      ></fountain-todo-item>
    </template>
  </ul>
  <fountain-footer *ngIf="(todos | async)?.length"
    [completedCount]="completedCount | async"
    [activeCount]="activeCount | async"
    [filter]="visibilityFilter | async"
    (onClearCompleted)="handleClearCompleted()"
    (onShow)="handleShow($event)"
  ></fountain-footer>
</section>