Add button to show task addition pane.

src/app/main-page/main-page.component.html

@@ -1,7 +1,12 @@
-<div>
+<div class="component">
     <h1>Todo List</h1>
     <div *ngFor="let task of tasks" [title]="task.creationDate">
         <h1>{{ task.title }}</h1>
         <p>{{ task.description }}</p>
     </div>
+    <div id="add-task-btn" *ngIf="!isAddingATask" (click)="startTaskAddition()">
+        <mat-icon>add</mat-icon>
+        <span>Ajouter une nouvelle tâche...</span>
+    </div>
+    <app-add-task *ngIf="isAddingATask"></app-add-task>
 </div>

src/app/main-page/main-page.component.scss

@@ -0,0 +1,21 @@
+.component {
+    #add-task-btn {
+        border-radius: 3px;
+        border-width: 1px;
+        border-color: #AAAAAA;
+        border-style: solid;
+        background-color: #FFFFFF;
+        display: flex;
+        align-items: center;
+        padding: 10px 20px;
+        cursor: pointer;
+
+        mat-icon {
+            margin: 0 10px;
+        }
+
+        span {
+            color: #AAAAAA;
+        }
+    }
+}

src/app/main-page/main-page.component.ts

@@ -9,6 +9,7 @@ import { TaskService } from '../core/service/task.service';
 })
 export class MainPageComponent implements OnInit {
   tasks: Task[] = [];
+  isAddingATask = false;
 
   constructor(
     private _taskService: TaskService
@@ -18,4 +19,7 @@ export class MainPageComponent implements OnInit {
     this._taskService.tasks.subscribe(tasks => this.tasks = tasks);
   }
 
+  startTaskAddition(): void {
+    this.isAddingATask = true;
+  }
 }