feat: implement product overview and quantity components

src/app/app.component.html

@@ -1,13 +1,3 @@
-<select id="userId" (change)="onUserSelect($event)">
+<h1>Shopping Cart</h1>
-  <ng-container *ngFor="let user of users()">
-    <option [value]="user.id">{{user.name}}</option>
-  </ng-container>
-</select>
 
-<ng-container *ngIf="selectedUserId() !== null && todos()">
+<app-product-overview></app-product-overview>
-  <select id="todoId">
-    <ng-container *ngFor="let todo of todos()">
-      <option [value]="todo.id">{{todo.title}}</option>
-    </ng-container>
-  </select>
-</ng-container>

src/app/app.component.spec.ts

@@ -1,29 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have the 'angular-workshop' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('angular-workshop');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, angular-workshop');
-  });
-});

src/app/app.component.ts

@@ -1,37 +1,12 @@
-import { Component, signal, ChangeDetectionStrategy, inject, WritableSignal } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { UserService } from './user.service';
+import { ProductOverviewComponent } from "./product-overview/product-overview.component";
-import { NgFor, NgIf } from '@angular/common';
-
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [NgFor, NgIf],
+  imports: [ProductOverviewComponent],
   templateUrl: './app.component.html',
-  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));
-  }
 }

src/app/app.config.ts

@@ -7,7 +7,6 @@ import { provideHttpClient, withFetch } from '@angular/common/http';
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
-
     provideRouter(routes), 
     provideHttpClient(withFetch())
   ]

src/app/product-overview/product-overview.component.html

@@ -0,0 +1,6 @@
+<app-product-selection (productChange)="onProductChange($event)" (quantityChange)="onQuantityChange($event)"></app-product-selection>
+<app-product-quantity [product]="selectedProduct()" (quantityChange)="onQuantityChange($event)"></app-product-quantity>
+
+<div>
+    <p>Total: {{ total() | currency : 'EUR' : 'symbol' : '1.2-2' }}</p>
+</div>

src/app/product-overview/product-overview.component.ts

@@ -0,0 +1,28 @@
+import { Component, ChangeDetectionStrategy, signal, computed } from '@angular/core';
+import { ProductSelectionComponent, Product } from '../product-selection/product-selection.component';
+import { ProductQuantityComponent } from '../product-quantity/product-quantity.component';
+import { CurrencyPipe } from '@angular/common';
+@Component({
+  selector: 'app-product-overview',
+  standalone: true,
+  imports: [ProductSelectionComponent, ProductQuantityComponent, CurrencyPipe],
+  templateUrl: './product-overview.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProductOverviewComponent {
+  selectedProduct = signal<Product | null>(null);
+  quantity = signal<number>(1);
+  
+  total = computed(() => {
+    const product = this.selectedProduct();
+    return product ? product.price * this.quantity() : 0;
+  });
+
+  onProductChange(product: Product) {
+    this.selectedProduct.set(product);
+  }
+
+  onQuantityChange(quantity: number) {
+    this.quantity.set(quantity);
+  }
+}

src/app/product-quantity/product-quantity.component.html

@@ -0,0 +1 @@
+<input type="number" [ngModel]="quantity" (ngModelChange)="onQuantityChange($event)" [disabled]="!product" min="1">

src/app/product-quantity/product-quantity.component.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { Product } from '../product-selection/product-selection.component';
+import { FormsModule } from '@angular/forms';
+import { ProductService } from '../services/product.service';
+
+@Component({
+  selector: 'app-product-quantity',
+  standalone: true,
+  imports: [FormsModule],
+  templateUrl: './product-quantity.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProductQuantityComponent {
+  @Input({ required: true }) set product(value: Product | null) {
+    this.productService.setProduct(value);
+  }
+  get product(): Product | null {
+    return this.productService.getProduct();
+  }
+
+  @Output() quantityChange = new EventEmitter<number>();
+
+  constructor(private productService: ProductService) {}
+
+  get quantity(): number {
+    return this.productService.getQuantity();
+  }
+
+  onQuantityChange(value: number) {
+    this.productService.setQuantity(value);
+    this.quantityChange.emit(value);
+  }
+}

src/app/product-selection/product-selection.component.html

@@ -0,0 +1,4 @@
+<select [ngModel]="selectedProductId()" (ngModelChange)="onProductChange($event)">
+  <option [ngValue]="null">Select a product</option>
+  <option *ngFor="let product of products()" [ngValue]="product.id">{{ product.title }} - {{ product.price | currency : 'EUR' : 'symbol' : '1.2-2' }}</option>
+</select>

src/app/product-selection/product-selection.component.ts

@@ -0,0 +1,58 @@
+import { NgFor } from '@angular/common';
+import { CurrencyPipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Component, ChangeDetectionStrategy, Output, EventEmitter, signal, inject, computed, OnInit } from '@angular/core';
+import { ProductService } from '../services/product.service';
+
+export type Product = {
+  id: number;
+  title: string;
+  price: number;
+  description: string;
+  category: string;
+  image: string;
+  rating: {
+    rate: number;
+    count: number;
+  }
+}
+
+@Component({
+  selector: 'app-product-selection',
+  standalone: true,
+  imports: [NgFor, CurrencyPipe, FormsModule],
+  templateUrl: './product-selection.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+
+export class ProductSelectionComponent implements OnInit {
+  products = signal<Product[]>([]);
+  
+  selectedProductId = signal<number | null>(null);
+  
+  selectedProduct = computed(() => {
+    const id = this.selectedProductId();
+    return id ? this.products().find(p => p.id === id) || null : null;
+  });
+
+  quantity = signal<number>(1);
+  
+  @Output() quantityChange = new EventEmitter<number>();
+  @Output() productChange = new EventEmitter<Product>();
+
+  private productService = inject(ProductService);
+
+  ngOnInit() {
+    this.productService.getProducts().subscribe(products => this.products.set(products));
+  }
+
+  onProductChange(productId: number) {
+    this.selectedProductId.set(productId);
+    const product = this.selectedProduct();
+    if (product) {
+      this.productChange.emit(product);
+      this.quantity.set(1);
+      this.quantityChange.emit(1);
+    }
+  }
+}

src/app/services/product.service.ts

@@ -0,0 +1,43 @@
+import { Injectable, signal, WritableSignal } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, shareReplay } from 'rxjs';
+import { Product } from '../product-selection/product-selection.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductService {
+  private productSignal = signal<Product | null>(null);
+  private quantitySignal = signal<number>(1);
+
+  constructor(private http: HttpClient) {}
+
+  // Local state management
+  setProduct(product: Product | null): void {
+    this.productSignal.set(product);
+    if (product) {
+      this.quantitySignal.set(1);
+    }
+  }
+
+  getProduct(): Product | null {
+    return this.productSignal();
+  }
+
+  setQuantity(quantity: number): void {
+    this.quantitySignal.set(quantity);
+  }
+
+  getQuantity(): number {
+    return this.quantitySignal();
+  }
+
+  // API calls
+  getProducts(): Observable<any[]> {
+    return this.http.get<any[]>('https://fakestoreapi.com/products');
+  }
+
+  getProductById(id: number): Observable<any> {
+    return this.http.get<any>(`https://fakestoreapi.com/products/${id}`);
+  }
+} 

src/app/services/user.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  constructor(private http: HttpClient) {}
+}

src/app/user.service.ts

@@ -1,26 +0,0 @@
-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<any[]> {
-    return this.http.get<any[]>('https://jsonplaceholder.typicode.com/users')
-  }
-
-  getUser(id: number): Observable<any> {
-    return this.http.get<any>(`https://jsonplaceholder.typicode.com/users/${id}`)
-  }
-
-  getTodos(userId: number): Observable<any[]> {
-    return this.http.get<any[]>(`https://jsonplaceholder.typicode.com/todos?userId=${userId}`)
-  }
-
-  getTodo(id: number): Observable<any> {
-    return this.http.get<any>(`https://jsonplaceholder.typicode.com/todos/${id}`)
-  }
-}