mantis-app/templates/mantis-todo/apps/web-client/src/app/components/todo-list/todo-list.component.ts

M.A.N.T.I.S (MongoDB, Analog, Nx, Tailwind CSS, Ionic, Storybook) is not just a CLI tool; it's your passport to a seamless full-stack project launch.

import {
  ChangeDetectorRef,
  Component,
  HostBinding,
  OnInit,
} from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { TodosService, Todo, CreateTodo } from '../../services/todos.service';
import { TodoItemComponent } from '../todo-item/todo-item.component';
import { AddTodoComponent } from '../add-todo/add-todo.component';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-todo-list',
  standalone: true,
  imports: [TodoItemComponent, AddTodoComponent, CommonModule],
  templateUrl: './todo-list.component.html',
})
export class TodoListComponent implements OnInit {
  @HostBinding('class')
  readonly hostClass = 'w-full';
  todos$ = new BehaviorSubject<Todo[]>([]);

  constructor(
    private todosService: TodosService,
    private cdf: ChangeDetectorRef,
  ) {}

  ngOnInit(): void {
    this.loadTodos();
  }

  loadTodos(): void {
    this.todosService.getAllTodos().subscribe((todos) => {
      this.todos$.next(todos);
      this.cdf.detectChanges();
    });
  }

  removeTodo(todo: Todo): void {
    this.todosService.removeTodo(todo).subscribe(() => this.loadTodos());
  }

  updateTodo(todo: Todo): void {
    this.todosService.updateTodo(todo).subscribe(() => this.loadTodos());
  }

  addTodo(todo: CreateTodo): void {
    this.todosService.addTodo(todo).subscribe(() => this.loadTodos());
  }
}