Todo List

Add, check off and delete todos. It's the app the tutorial builds step by step.

What it shows

@for with @empty — renders the todos, or a message once the list is empty. track todo.id lets Angular reuse rows.
<input> and (bindinput) — the typed text arrives in event.detail.value. See <input>.
(catchtap) — the ✕ button stops its tap from bubbling, so deleting a todo doesn't also toggle it. See Handling taps and events.
Class bindings — [class.line-through] and [class.bg-indigo-500] restyle finished todos.