HttpClient with Observable (subscribe)

labs/ng-demo/ng-demo/src/app/app.config.ts

@@ -2,7 +2,8 @@ import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import {provideHttpClient, withFetch} from "@angular/common/http";
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)]
+  providers: [provideRouter(routes), provideHttpClient(withFetch())]
 };

labs/ng-demo/ng-demo/src/app/services/todo.service.ts

@@ -1,19 +1,35 @@
-import { Injectable } from '@angular/core';
+import {inject, Injectable} from '@angular/core';
 import {Todo} from "../model/todo";
 import {set} from "../model/model";
+import {HttpClient} from "@angular/common/http";
+import {StoreService} from "./store.service";
 
 @Injectable({
   providedIn: 'root'
 })
 export class TodoService {
 
+  store = inject(StoreService).store
+  httpClient = inject(HttpClient)
+
+  // async findAll() {
+  //   const response = await fetch("https://jsonplaceholder.typicode.com/todos")
+  //   const todos: Todo[] = await response.json()
+  //   //console.log("Todo's loaded", todos)
+  //   set(model => {
+  //     model.todos = todos
+  //   })
+  // }
+
   async findAll() {
-    const response = await fetch("https://jsonplaceholder.typicode.com/todos")
-    const todos: Todo[] = await response.json()
-    //console.log("Todo's loaded", todos)
-    set(model => {
-      model.todos = todos
-    })
+    this.httpClient.get<Todo[]>("https://jsonplaceholder.typicode.com/todos")
+      .subscribe(todos => {
+        set(model => {
+          model.todos = todos
+        })
+      })
+    console.log("findAll: ",this.store.value.todos.length)
+
   }
 
 }