Task törlése - saját event készítése

Felvesszük a click built-in eseményt a taskhoz (gombhoz):

<article>
  <h2>{{ task.title }}</h2>
  <time> {{ task.dueDate }}</time>
  <p>{{ task.summary }}</p>
  <p class="actions">
    <button (click)="onCompleteTask()">Complete</button>
  </p>
</article>

Létrehozunk egy complete eseményt és csinalunk egy metódust ami kiajánlja az id paramétert:

import {Component, EventEmitter, Input, Output} from '@angular/core';

interface Task {
  id: string;
  userId: string;
  title: string;
  summary: string;
  dueDate: string;
}

@Component({
  selector: 'app-task',
  standalone: true,
  imports: [],
  templateUrl: './task.component.html',
  styleUrl: './task.component.css'
})
export class TaskComponent {
  @Input({required: true}) task!: Task;
  @Output() complete = new EventEmitter<string>();

  onCompleteTask() {
    this.complete.emit(this.task.id);
  }
}

Használjuk a complete eseményt és továbbítjuk az értékeket (az id-t a $event-ben) mint paraméter

<section>
  <header>
  <h2> {{ name }}'s Tasks</h2>
  <menu>
    <button>Add Task</button>
  </menu>
  </header>

  <ul>
    @for (task of selectedUserTasks; track task.id) {
      <li>
        <app-task [task]="task" (complete)="onCompleteTask($event)"/>
      </li>
    }
  </ul>
</section>

Megcsinljuk a filter-t ami kiszedi az elkészült task-ot az onCompleteTask implementáción keresztül:

import {Component, Input} from '@angular/core';
import {TaskComponent} from './task/task.component';

@Component({
  selector: 'app-tasks',
  standalone: true,
  imports: [
    TaskComponent
  ],
  templateUrl: './tasks.component.html',
  styleUrl: './tasks.component.css'
})
export class TasksComponent {
  @Input({ required: true}) userId!: string;
  @Input({ required: true }) name!: string;
  tasks = [
    {
      id: 't1',
      userId: 'u1',
      title: "Vmi1",
      summary: "vmi summary 1",
      dueDate: '2025-12-31'
    },
    {
      id: 't2',
      userId: 'u1',
      title: "Vmi2",
      summary: "vmi summary 2",
      dueDate: '2025-12-31'
    },{
      id: 't3',
      userId: 'u1',
      title: "Vmi3",
      summary: "vmi summary 3",
      dueDate: '2025-12-31'
    },{
      id: 't4',
      userId: 'u1',
      title: "Vmi4",
      summary: "vmi summary 4",
      dueDate: '2025-12-31'
    }
  ];

  get selectedUserTasks() {
    return this.tasks.filter((task => task.userId === this.userId));
  }

  onCompleteTask(id: string) {
    this.tasks = this.tasks.filter( (t) => t.id !== id); //Újraépíti a tömböt, a kapott id nélkül!!
  }
}