change angular version 20 to 21

package.json

@@ -10,21 +10,21 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^20.3.14",
-    "@angular/compiler": "^20.3.14",
-    "@angular/core": "^20.3.14",
-    "@angular/forms": "^20.3.14",
-    "@angular/platform-browser": "^20.3.14",
-    "@angular/platform-browser-dynamic": "^20.3.14",
-    "@angular/router": "^20.3.14",
+    "@angular/common": "^21.0.1",
+    "@angular/compiler": "^21.0.1",
+    "@angular/core": "^21.0.1",
+    "@angular/forms": "^21.0.1",
+    "@angular/platform-browser": "^21.0.1",
+    "@angular/platform-browser-dynamic": "^21.0.1",
+    "@angular/router": "^21.0.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^20.3.12",
-    "@angular/cli": "^20.3.12",
-    "@angular/compiler-cli": "^20.3.14",
+    "@angular/build": "^21.0.0",
+    "@angular/cli": "^21.0.0",
+    "@angular/compiler-cli": "^21.0.1",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.6.0",
     "karma": "~6.4.0",

src/app/component/home/home.component.html

@@ -1,15 +1,16 @@
 <h1>home works!</h1>
 
 <h2>Task List</h2>
-<ng-container *ngIf="tasks$ | async as tasks; else loading">
+@if (tasks$ | async; as tasks) {
   <ul>
-        <li *ngFor="let task of tasks">
+    @for (task of tasks; track task) {
+      <li>
         {{ task.title }}
       </li>
+    }
   </ul>
-</ng-container>
-<ng-template #loading>
+} @else {
   <p>Loading tasks...</p>
-</ng-template>
+}
 
 <p>Temps écoulé : {{ count / 2 }} secondes</p>

src/app/component/home/home.component.ts

@@ -11,6 +11,7 @@ import { TaskService } from '../../service/task.service';
 })
 export class HomeComponent {
   protected count = 0;
+  private intervalId: any;
 
   tasks$!: ReturnType<TaskService['getTasks']>;
 
@@ -19,10 +20,15 @@ export class HomeComponent {
   }
 
   ngOnInit() {
-    setInterval(() => {
+    this.intervalId = setInterval(() => {
       this.count++;
-      console.log(this.count);
     }, 500);
   }
 
+  ngOnDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  }
+
 }