Add button to show task addition pane.

src/app/add-task/add-task.component.html

@@ -1 +1,3 @@
-<p>add-task works!</p>
+<div>
+    <mat-icon>add</mat-icon>
+</div>

src/app/app.module.ts

@@ -6,6 +6,8 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { MainPageComponent } from './main-page/main-page.component';
 import { AddTaskComponent } from './add-task/add-task.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {MatIconModule} from '@angular/material/icon'; 
 
 @NgModule({
   declarations: [
@@ -15,11 +17,12 @@ import { AddTaskComponent } from './add-task/add-task.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatIconModule
   ],
   providers: [
     CookieService,
-    
   ],
   bootstrap: [AppComponent]
 })

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;
+  }
 }