Class ItemListComponent

samples/angular/src/app/item-list.component.ts:126–171

  `],
})
export class ItemListComponent {
  // Signal input (Angular 17+)
  todoList = input.required<TodoList>();

  newItemTitle = '';

  // Computed signal that depends on todoList input
  private todoListId = computed(() => this.todoList().id);

  // LiveQuery as signal - updates when database changes
  // Note: liveQuery tracks Dexie reads, not signal changes.
  // This works because @for track ensures each component instance has a fixed todoListId.
  items = toSignal(
    from(liveQuery(() => 
      db.todoItems.where({ todoListId: this.todoListId() }).toArray()
    )),
    { initialValue: [] as TodoItem[] }
  );

  async addItem() {
    const title = this.newItemTitle.trim();
    if (!title) return;
    await db.todoItems.add({
      todoListId: this.todoListId(),
      title,
      done: false,
    });
    this.newItemTitle = '';
  }

  async toggleItem(item: TodoItem) {
    await db.todoItems.update(item.id, { done: !item.done });
  }

  async deleteItem(id: number) {
    await db.todoItems.delete(id);
  }

  async deleteList() {
    // Delete all items in this list, then the list itself (atomically)
    await db.transaction('rw', db.todoItems, db.todoLists, async () => {
      await db.todoItems.where({ todoListId: this.todoListId() }).delete();
      await db.todoLists.delete(this.todoListId());
    });
  }
}