Как переключить выбранный элемент, чем все элементы в массиве?

Question

Вывод здесь: я хочу переключить текущий элемент. Как я могу выбрать отдельный элемент с индексом и применить стиль?

app.component.html:

<section class="main">
<ul class="todo-list">

  <li *ngFor="let todo of todos; let i = index">

    <div class="view">
      <input class="toggle" type="checkbox"
      (click)="toggleTodoComplete(todo)"
      [checked]="true">
      <label [ngClass]="{strike: !checkIt}">{{todo.title}}</label>
      <button class="destroy" (click)="removeTodo(todo)">
      </button>
    </div>

  </li>

</ul>

app.component.css

.strike {
  text-decoration: line-through;
}

app.component.ts

import { ToDo } from './todo';
import { TodoDataService } from './todo-data.service';

  todos: ToDo[];

  checkIt = false;

  toggleTodoComplete(todo) {
    this.checkIt = !this.checkIt;
  }

Todo.ts (класс)

export class ToDo {
 constructor(public title: string) {}
}

ToDo-data.service.ts

export class TodoDataService {
  todosChanged = new Subject<ToDo[]>();
  checkIt = false;

  private myTodos: ToDo[] = [
    new ToDo('First'),
    new ToDo('Second'),
  ];

getTodos() {
    return this.myTodos.slice();
  }

  addTodo(todo: ToDo) {
    this.myTodos.push(todo);
    this.todosChanged.next(this.myTodos.slice());
  }