Form beküldése

A tasks-hoz hozzáadjuk az (add) event-et és megadjuk a kezelő metódus nevét onAddTask($event)

@if (isAddingTask) {
  <app-new-task (cancel)="onCancelAddTask()" (add)="onAddTask($event)"/>
}

<section>
  <header>
  <h2> {{ name }}'s Tasks</h2>
  <menu>
    <button (click)="onStartAddTask()">Add Task</button>
  </menu>
  </header>

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

kiszervezzük az összetartozó adatokat egy osztályba (ahol használjuk bevezetjük):

export interface NewTaskData {
  title: string;
  summary: string;
  date: string;
}

létrehozzuk az onAddTask metódust a tasks komponensben:

import {Component, Input} from '@angular/core';
import {TaskComponent} from './task/task.component';
import {NewTaskComponent} from './new-task/new-task.component';
import {NewTaskData} from './task/new-task.module';

@Component({
  selector: 'app-tasks',
  standalone: true,
  imports: [
    TaskComponent,
    NewTaskComponent
  ],
  templateUrl: './tasks.component.html',
  styleUrl: './tasks.component.css'
})
export class TasksComponent {
  @Input({ required: true}) userId!: string;
  @Input({ required: true }) name!: string;
  isAddingTask = false;

  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!!
  }

  onStartAddTask() {
    this.isAddingTask = true;
  }

  onCancelAddTask() {
    this.isAddingTask = false; //el fogja távolítani az if miatt a <app-new-task> komponent!!!!
  }

  onAddTask(taskData: NewTaskData) {
    this.tasks.unshift({ //vagy push-al is hozzá lehet adni elemet
      id: new Date().getTime().toString(),
      userId:this.userId,
      title: taskData.title,
      summary: taskData.summary,
      dueDate: taskData.date
    })
    this.isAddingTask = false;
  }
}