Update Angular app to align with updated tutorial

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
       max-parallel: 1
       matrix:
         # Angular 22 requires Node ^22.22.3 || ^24.15.0 || >=26.0.0
-        node-version: [22.22.3, 24.15.0]
+        node-version: [22.22.3, 24.18.0, 26.5.0]
 
     services:
       mongodb:

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 *.env
+.DS_Store

client/src/app/add-employee/add-employee.ts

@@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { EmployeeForm } from '../employee-form/employee-form';
 import { Employee } from '../employee';
-import { EmployeeService } from '../employee.service';
+import { EmployeeService } from '../employee';
 import { MatCardModule } from '@angular/material/card';
 
 @Component({

client/src/app/api-config.service.ts

@@ -3,7 +3,7 @@ import { isPlatformBrowser } from '@angular/common';
 import { resolveApiBaseUrl } from './api-url';
 
 @Service()
-export class ApiConfigService {
+export class ApiConfig {
   private readonly platformId = inject(PLATFORM_ID);
 
   // In the browser, derive the API URL from the current location so it works

client/src/app/app.config.ts

@@ -3,16 +3,14 @@ import { provideRouter, withComponentInputBinding } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideClientHydration, withNoIncrementalHydration } from '@angular/platform-browser';
-import { provideHttpClient, withFetch } from '@angular/common/http';
-import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZonelessChangeDetection(),
     provideRouter(routes, withComponentInputBinding()),
     provideClientHydration(withNoIncrementalHydration()),
-    provideHttpClient(withFetch()),
-    provideAnimationsAsync(),
+    provideHttpClient(),
   ]
 };

client/src/app/app.routes.ts

@@ -4,8 +4,7 @@ import { catchError, of } from 'rxjs';
 import { EmployeesList } from './employees-list/employees-list';
 import { AddEmployee } from './add-employee/add-employee';
 import { EditEmployee } from './edit-employee/edit-employee';
-import { Employee } from './employee';
-import { EmployeeService } from './employee.service';
+import { Employee, EmployeeService } from './employee';
 
 const employeeResolver: ResolveFn<Employee | RedirectCommand> = (route) => {
   const router = inject(Router);

client/src/app/app.ts

@@ -3,19 +3,19 @@ import { RouterOutlet } from '@angular/router';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
 @Component({
-    selector: 'app-root',
+  selector: 'app-root',
   imports: [RouterOutlet, MatToolbarModule],
-    styles: [
-        `
+  styles: [
+    `
       main {
         display: flex;
         justify-content: center;
         padding: 2rem 4rem;
       }
     `,
-    ],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    template: `
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
     <mat-toolbar>
       <span>Employees Management System</span>
     </mat-toolbar>
@@ -25,5 +25,4 @@ import { MatToolbarModule } from '@angular/material/toolbar';
   `
 })
 export class App {
-  title = 'client';
 }

client/src/app/edit-employee/edit-employee.ts

@@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy, input, inject } from '@angular/core
 import { EmployeeForm } from '../employee-form/employee-form';
 import { Router } from '@angular/router';
 import { Employee } from '../employee';
-import { EmployeeService } from '../employee.service';
+import { EmployeeService } from '../employee';
 import { MatCardModule } from '@angular/material/card';
 
 @Component({

client/src/app/employee.ts

@@ -1,6 +1,36 @@
+import { Service, inject } from '@angular/core';
+import { HttpClient, httpResource } from '@angular/common/http';
+import { ApiConfig } from './api-config.service';
+
 export interface Employee {
   name: string;
   position: string;
   level: 'junior' | 'mid' | 'senior';
   _id?: string;
 }
+
+@Service()
+export class EmployeeService {
+  private readonly httpClient = inject(HttpClient);
+  private readonly url = inject(ApiConfig).baseUrl;
+
+  readonly employeesResource = httpResource<Employee[]>(() => `${this.url}/employees`, {
+    defaultValue: [],
+  });
+
+  getEmployee(id: string) {
+    return this.httpClient.get<Employee>(`${this.url}/employees/${id}`);
+  }
+
+  createEmployee(employee: Employee) {
+    return this.httpClient.post(`${this.url}/employees`, employee, { responseType: 'text' });
+  }
+
+  updateEmployee(id: string, employee: Employee) {
+    return this.httpClient.put(`${this.url}/employees/${id}`, employee, { responseType: 'text' });
+  }
+
+  deleteEmployee(id: string) {
+    return this.httpClient.delete(`${this.url}/employees/${id}`, { responseType: 'text' });
+  }
+}

client/src/app/employees-list/employees-list.ts

@@ -1,5 +1,5 @@
 import { Component, ChangeDetectionStrategy, computed, inject } from '@angular/core';
-import { EmployeeService } from '../employee.service';
+import { EmployeeService } from '../employee';
 import { RouterModule } from '@angular/router';
 import { MatTableModule } from '@angular/material/table';
 import { MatButtonModule } from '@angular/material/button';