Fix tasks persistence and display.

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

@@ -1,12 +1,8 @@
 <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()">
+    <app-display-task *ngFor="let task of tasks" [task]="task"></app-display-task>
+    <div id="add-task-btn" *ngIf="!isAddingATask" (click)="createTask()">
         <mat-icon>add</mat-icon>
         <span>Ajouter une nouvelle tâche...</span>
     </div>
-    <app-add-task *ngIf="isAddingATask"></app-add-task>
-</div>
+</div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
 import { Task } from '../core/entity/task';
 import { TaskService } from '../core/service/task.service';
 
@@ -7,7 +7,7 @@ import { TaskService } from '../core/service/task.service';
   templateUrl: './main-page.component.html',
   styleUrls: ['./main-page.component.scss']
 })
-export class MainPageComponent implements OnInit {
+export class MainPageComponent implements OnInit, AfterViewInit {
   tasks: Task[] = [];
   isAddingATask = false;
 
@@ -19,7 +19,15 @@ export class MainPageComponent implements OnInit {
     this._taskService.tasks.subscribe(tasks => this.tasks = tasks);
   }
 
-  startTaskAddition(): void {
-    this.isAddingATask = true;
+  ngAfterViewInit(): void {
+    this._taskService.refresh();
+  }
+
+  createTask(): void {
+    const newTask = {
+      creationDate: new Date()
+    } as Task;
+
+    this._taskService.add(newTask);
   }
 }