Lot of visual improvements

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

@@ -1,8 +1,9 @@
-import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Task } from 'src/app/core/entity/task';
 import { TaskListService } from 'src/app/core/service/task-list.service';
 
+
 @Component({
   selector: 'app-task-display',
   templateUrl: './task-display.component.html',
@@ -11,13 +12,26 @@ import { TaskListService } from 'src/app/core/service/task-list.service';
 export class TaskDisplayComponent implements AfterViewInit {
   @Input() task?: Task;
   titleControl = new FormControl(this.task?.title);
+  isExpanded = false;
 
   constructor(
     private _taskListService: TaskListService
   ) {}
-  
 
   ngAfterViewInit(): void {
     this.titleControl.setValue(this?.task?.title);
   }
+
+  expand(): void {
+    this.isExpanded = !this.isExpanded;
+  }
+
+  getExpendedClass(): string {
+    let result = 'body';
+
+    if (this.isExpanded) {
+      result += ' expanded';
+    }
+    return result;
+  }
 }