Add description saving and silent save in service.

src/app/active-list-tasks/task-display/task-display.component.ts

@@ -1,5 +1,7 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { Task } from 'src/app/core/entity/task';
 import { TaskListService } from 'src/app/core/service/task-list.service';
 
@@ -9,11 +11,14 @@ import { TaskListService } from 'src/app/core/service/task-list.service';
   templateUrl: './task-display.component.html',
   styleUrls: ['./task-display.component.scss']
 })
-export class TaskDisplayComponent implements AfterViewInit {
+export class TaskDisplayComponent implements AfterViewInit, OnDestroy {
   @Input() task?: Task;
-  titleControl = new FormControl(this.task?.title);
-  isExpanded = false;
   @ViewChild('titleInput', {static: true}) titleInput?: ElementRef<HTMLInputElement>;
+  @ViewChild('descriptionInput', {static: true}) descriptionInput?: ElementRef<HTMLTextAreaElement>;
+  titleControl = new FormControl();
+  descriptionControl = new FormControl();
+  isExpanded = false;
+  private _subscriptions: Subscription[] = [];
 
   constructor(
     private _taskListService: TaskListService
@@ -21,6 +26,37 @@ export class TaskDisplayComponent implements AfterViewInit {
 
   ngAfterViewInit(): void {
     this.titleControl.setValue(this?.task?.title);
+    this.descriptionControl.setValue(this?.task?.description);
+
+    const titleControlSubscription = this.titleControl.valueChanges
+        .pipe(
+          distinctUntilChanged(),
+          debounceTime(500)
+        )
+        .subscribe(newTitle => {
+          if (this.task) {
+            this.task.title = newTitle;
+            this._taskListService.updateTask(this.task);
+          }
+        });
+    this._subscriptions.push(titleControlSubscription);
+
+    const descriptionControlSubscription = this.descriptionControl.valueChanges
+    .pipe(
+      distinctUntilChanged(),
+      debounceTime(500)
+    )
+    .subscribe(description => {
+      if (this.task) {
+        this.task.description = description;
+        this._taskListService.updateTask(this.task);
+      }
+    });
+    this._subscriptions.push(descriptionControlSubscription);
+  }
+
+  ngOnDestroy(): void {
+    this._subscriptions.forEach(subscription => subscription.unsubscribe());
   }
 
   expand(): void {