feat: add user selection and todos fetching functionality

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<number | null>(null);
+
+  users: WritableSignal<any[]> = signal([]);
+  
+  todos: WritableSignal<any[]> = 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));
+  }
 }