From 17c955067ec09790df94534a3cb25b37a714bfcf Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Tue, 29 Apr 2025 08:18:21 +0200 Subject: [PATCH] feat: add user selection and todos fetching functionality --- src/app/app.component.html | 347 ++----------------------------------- src/app/app.component.ts | 33 +++- src/app/app.config.ts | 9 +- src/app/user.service.ts | 26 +++ 4 files changed, 74 insertions(+), 341 deletions(-) create mode 100644 src/app/user.service.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 36093e1..dfa99d7 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,336 +1,13 @@ - - - - - - - - + - - -
-
-
- -

Hello, {{ title }}

-

Congratulations! Your app is running. 🎉

-
- -
-
- @for (item of [ - { title: 'Explore the Docs', link: 'https://angular.dev' }, - { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' }, - { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' }, - { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' }, - { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' }, - ]; track item.title) { - - {{ item.title }} - - - - - } -
- -
-
-
- - - - - - - - - - - + + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ddaa042..72d6e84 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,12 +1,37 @@ -import { Component } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; +import { Component, signal, ChangeDetectionStrategy, inject, WritableSignal } from '@angular/core'; +import { UserService } from './user.service'; +import { NgFor, NgIf } from '@angular/common'; @Component({ selector: 'app-root', - imports: [RouterOutlet], + standalone: true, + imports: [NgFor, NgIf], templateUrl: './app.component.html', - styleUrl: './app.component.css' + styleUrl: './app.component.css', + changeDetection: ChangeDetectionStrategy.OnPush }) export class AppComponent { title = 'angular-workshop'; + + private userService = inject(UserService); + + selectedUserId = signal(null); + + users: WritableSignal = signal([]); + + todos: WritableSignal = signal([]); + + ngOnInit() { + this.userService.getUsers().subscribe(users => this.users.set(users)); + + if(this.selectedUserId() !== null) { + this.userService.getTodos(this.selectedUserId()!).subscribe(todos => this.todos.set(todos)); + } + } + + onUserSelect(event: Event) { + const userId = Number((event.target as HTMLSelectElement).value); + this.selectedUserId.set(userId); + this.userService.getTodos(userId).subscribe(todos => this.todos.set(todos)); + } } diff --git a/src/app/app.config.ts b/src/app/app.config.ts index a9af518..ea48cd5 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -2,8 +2,13 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; -import { provideClientHydration, withEventReplay } from '@angular/platform-browser'; +import { provideHttpClient, withFetch } from '@angular/common/http'; export const appConfig: ApplicationConfig = { - providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay())] + providers: [ + provideZoneChangeDetection({ eventCoalescing: true }), + + provideRouter(routes), + provideHttpClient(withFetch()) + ] }; diff --git a/src/app/user.service.ts b/src/app/user.service.ts new file mode 100644 index 0000000..08b31a5 --- /dev/null +++ b/src/app/user.service.ts @@ -0,0 +1,26 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable, shareReplay } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class UserService { + constructor(private http: HttpClient) {} + + getUsers(): Observable { + return this.http.get('https://jsonplaceholder.typicode.com/users') + } + + getUser(id: number): Observable { + return this.http.get(`https://jsonplaceholder.typicode.com/users/${id}`) + } + + getTodos(userId: number): Observable { + return this.http.get(`https://jsonplaceholder.typicode.com/todos?userId=${userId}`) + } + + getTodo(id: number): Observable { + return this.http.get(`https://jsonplaceholder.typicode.com/todos/${id}`) + } +}