Toutes les fonctionnalités to do list ok

src/app/pages/page-to-do-list/page-to-do-list.component.html

@@ -1,10 +1,23 @@
 <app-header></app-header>
-<app-side-bar></app-side-bar>
+<div class="row">
+  <div class="col-md-auto">
+    <app-side-bar></app-side-bar>
+  </div>
+  <div class="col menu text-center">
+    <h2>To-Do-List</h2>
+    <div class="d-flex align-items-stretch"></div>
+    <input
+      type="text"
+      class="todo-input"
+      placeholder="+ Nouvelle To-Do-List"
+      [(ngModel)]="todoListTitle"
+      (keyup.enter)="addTodoByTeamId()"
+    />
 
-<div class="d-flex align-items-stretch">
-  <div class="row">
-    <div class="col" *ngFor="let todos of result">
-      <app-to-do-list [todo]="todos"> </app-to-do-list>
+    <div class="d-flex align-items-stretch">
+      <div class="col" *ngFor="let todos of listTodos">
+        <app-to-do-list [todo]="todos"> </app-to-do-list>
+      </div>
     </div>
   </div>
 </div>

src/app/pages/page-to-do-list/page-to-do-list.component.ts

@@ -1,26 +1,50 @@
 import { Component, OnInit } from '@angular/core';
+import { ToDoList } from 'src/app/models/to-do-list';
 import { TodoService } from 'src/app/services/todo.service';
-
-
+import { Team } from 'src/app/models/team';
 
 @Component({
   selector: 'app-page-to-do-list',
   templateUrl: './page-to-do-list.component.html',
-  styleUrls: ['./page-to-do-list.component.scss']
+  styleUrls: ['./page-to-do-list.component.scss'],
 })
 export class PageToDoListComponent implements OnInit {
-  public result : any;
-
-  constructor(private TodoService : TodoService) { }
-
-  ngOnInit(): void {
-    this.TodoService.getToDoListByTeamId().subscribe((data :any)=>{
-
-      this.result = data;
-      console.log(data);
-    });
-
+  public result: any;
+  public listTodos: any[];
+  public todoListTitle: string;
+  public idTodo: number;
 
+  constructor(private TodoService: TodoService) {
+    this.listTodos = [];
+    this.todoListTitle = '';
+    this.idTodo = 0;
   }
 
+  ngOnInit(): void {
+    this.TodoService.getToDoListByTeamId()?.subscribe((listTodos: any) => {
+      console.log(listTodos);
+      this.listTodos = listTodos;
+      this.todoListTitle = '';
+      this.idTodo = 0;
+    });
+  }
+  //Ajouter une todo List
+  addTodoByTeamId() {
+    const todoList: ToDoList = {
+      nom: this.todoListTitle,
+      taches: [],
+      id: 0,
+    };
+    this.TodoService.addTodoByTeamId(todoList)?.subscribe((resp) => {
+      console.log(todoList);
+      window.location.reload();
+    });
+  }
+
+  deleteTodo(id: number): void {
+    window.alert('La to-do-List a bien été supprimé!');
+    this.TodoService.deleteTodoById(id).subscribe((resp) => {
+      window.location.reload();
+    });
+  }
 }