Updating naming functions and variables. Adding onCancel call when click on the background.

src/app/tasks/new-task/new-task.component.html

@@ -1,4 +1,4 @@
-<div class="backdrop"></div>
+<div class="backdrop" (click)="onCancel()"></div>
 <dialog open>
   <h2>Add Task</h2>
   <form>
@@ -18,7 +18,7 @@
     </p>
 
     <p class="actions">
-      <button type="button" (click)="onCloseTask()" >Cancel</button>
+      <button type="button" (click)="onCancel()" >Cancel</button>
       <button type="submit">Create</button>
     </p>
   </form>

src/app/tasks/new-task/new-task.component.ts

@@ -1,5 +1,4 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {Task} from '../../task/task.model';
+import {Component, EventEmitter, Output} from '@angular/core';
 
 @Component({
   selector: 'app-new-task',
@@ -8,9 +7,9 @@ import {Task} from '../../task/task.model';
   styleUrl: './new-task.component.css'
 })
 export class NewTaskComponent {
-  @Output() close = new EventEmitter<null>();
+  @Output() cancel = new EventEmitter<void>();
 
-  onCloseTask() {
-    this.close.emit();
+  onCancel() {
+    this.cancel.emit();
   }
 }

src/app/tasks/tasks.component.html

@@ -1,5 +1,5 @@
 @if (isAddingTask) {
-  <app-new-task (close)="onStopAddTask()" />
+  <app-new-task (cancel)="onCancelAddTask()" />
 }
 
 <section id="tasks">

src/app/tasks/tasks.component.ts

@@ -43,15 +43,15 @@ export class TasksComponent {
     return this.tasks.filter((task) => task.userId === this.user.id);
   }
 
+  onCompleteTask(taskId: string) {
+    this.tasks = this.tasks.filter((task) => task.id !== taskId);
+  }
+
   onStartAddTask() {
     this.isAddingTask = true;
   }
 
-  onStopAddTask() {
+  onCancelAddTask() {
     this.isAddingTask = false;
   }
-
-  onCompleteTask(taskId: string) {
-    this.tasks = this.tasks.filter((task) => task.id !== taskId);
-  }
 }