Task

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

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

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

@@ -1,11 +1,28 @@
+
 import { Component } from '@angular/core';
+import { CommonModule, AsyncPipe } from '@angular/common';
+import { TaskService } from '../../service/task.service';
 
 @Component({
   selector: 'app-home',
-  imports: [],
+  imports: [CommonModule, AsyncPipe],
   templateUrl: './home.component.html',
   styleUrl: './home.component.css'
 })
 export class HomeComponent {
+  protected count = 0;
+
+  tasks$!: ReturnType<TaskService['getTasks']>;
+
+  constructor(private taskService: TaskService) {
+    this.tasks$ = this.taskService.getTasks();
+  }
+
+  ngOnInit() {
+    setInterval(() => {
+      this.count++;
+      console.log(this.count);
+    }, 500);
+  }
 
 }

src/app/service/task.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TaskService } from './task.service';
+
+describe('TaskService', () => {
+  let service: TaskService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TaskService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/task.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TaskService {
+  private tasks = [{id: 1 , title: 'Sample Task'}, {id: 2, title: 'Another Task'}, {id: 3, title: 'More Tasks'}];
+
+  getTasks() {
+    return of(this.tasks).pipe(delay(1000));
+  }
+}