jleibl/angular-workshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(product-selection): add loading state during product fetch

Browse Source
This commit is contained in:
Jan-Marlon Leibl
2025-05-06 08:33:46 +02:00
parent 1c46e15836
commit 03bb5e70ee
5 changed files with 25 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/product-quantity/product-quantity.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, signal } from '@angular/core';
import { Product } from '../product-selection/product-selection.component'; import { Product } from '../product-selection/product-selection.component';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { ProductService } from '../services/product.service'; import { ProductService } from '../services/product.service';
@ -11,6 +11,7 @@ import { ProductService } from '../services/product.service';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class ProductQuantityComponent { export class ProductQuantityComponent {
@Input({ required: true }) set product(value: Product | null) { @Input({ required: true }) set product(value: Product | null) {
this.productService.setProduct(value); this.productService.setProduct(value);
} }

10
src/app/product-selection/product-selection.component.html
View File

@ -1,4 +1,8 @@
<select [ngModel]="selectedProduct()" (ngModelChange)="onProductChange($event)"> <ng-container *ngIf="isProductLoading()">
<option [ngValue]="null">Select a product</option> <div>Loading...</div>
<option *ngFor="let product of products()" [ngValue]="product">{{ product.title }} - {{ product.price | currency : 'EUR' : 'symbol' : '1.2-2' }}</option> </ng-container>
<ng-container *ngIf="!isProductLoading()">
<select [ngModel]="selectedProduct()" (ngModelChange)="onProductChange($event)">
<option [ngValue]="null">Select a product</option>
<option *ngFor="let product of products()" [ngValue]="product">{{ product.title }} - {{ product.price | currency : 'EUR' : 'symbol' : '1.2-2' }}</option>
</select> </select>

11
src/app/product-selection/product-selection.component.ts
View File

@ -1,4 +1,4 @@
import { NgFor } from '@angular/common'; import { NgFor, NgIf } from '@angular/common';
import { CurrencyPipe } from '@angular/common'; import { CurrencyPipe } from '@angular/common';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { Component, ChangeDetectionStrategy, Output, EventEmitter, signal, inject, computed, OnInit } from '@angular/core'; import { Component, ChangeDetectionStrategy, Output, EventEmitter, signal, inject, computed, OnInit } from '@angular/core';
@ -20,7 +20,7 @@ export type Product = {
@Component({ @Component({
selector: 'app-product-selection', selector: 'app-product-selection',
standalone: true, standalone: true,
imports: [NgFor, CurrencyPipe, FormsModule], imports: [NgFor, CurrencyPipe, FormsModule, NgIf],
templateUrl: './product-selection.component.html', templateUrl: './product-selection.component.html',
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
@ -32,13 +32,18 @@ export class ProductSelectionComponent implements OnInit {
quantity = signal<number>(1); quantity = signal<number>(1);
isProductLoading = signal(true);
@Output() quantityChange = new EventEmitter<number>(); @Output() quantityChange = new EventEmitter<number>();
@Output() productChange = new EventEmitter<Product>(); @Output() productChange = new EventEmitter<Product>();
private productService = inject(ProductService); private productService = inject(ProductService);
ngOnInit() { ngOnInit() {
this.productService.getProducts().subscribe(products => this.products.set(products)); this.productService.getProducts().subscribe(products => {
this.products.set(products);
this.isProductLoading.set(false);
});
} }
onProductChange(selectedProduct: Product) { onProductChange(selectedProduct: Product) {

12
src/app/services/product.service.ts
View File

@ -1,6 +1,6 @@
import { Injectable, signal, WritableSignal } from '@angular/core'; import { Injectable, signal, WritableSignal } from '@angular/core';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Observable, shareReplay } from 'rxjs'; import { delay, Observable, shareReplay } from 'rxjs';
import { Product } from '../product-selection/product-selection.component'; import { Product } from '../product-selection/product-selection.component';
@Injectable({ @Injectable({
@ -12,7 +12,6 @@ export class ProductService {
constructor(private http: HttpClient) {} constructor(private http: HttpClient) {}
// Local state management
setProduct(product: Product | null): void { setProduct(product: Product | null): void {
this.productSignal.set(product); this.productSignal.set(product);
if (product) { if (product) {
@ -32,12 +31,15 @@ export class ProductService {
return this.quantitySignal(); return this.quantitySignal();
} }
// API calls
getProducts(): Observable<any[]> { getProducts(): Observable<any[]> {
return this.http.get<any[]>('https://fakestoreapi.com/products'); return this.http.get<any[]>('https://fakestoreapi.com/products').pipe(
delay(1000)
);
} }
getProductById(id: number): Observable<any> { getProductById(id: number): Observable<any> {
return this.http.get<any>(`https://fakestoreapi.com/products/${id}`); return this.http.get<any>(`https://fakestoreapi.com/products/${id}`).pipe(
delay(1000)
);
} }
} }