Comprehensive comparison for technology in applications

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Subject, Observable } from 'rxjs';
import { takeUntil, catchError, finalize } from 'rxjs/operators';
import { of } from 'rxjs';

interface Product {
  id: number;
  name: string;
  price: number;
  stock: number;
}

interface ApiResponse<T> {
  data: T;
  message: string;
  success: boolean;
}

@Component({
  selector: 'app-product-management',
  template: `
    <div class="product-container">
      <h2>Product Management</h2>
      <form [formGroup]="productForm" (ngSubmit)="onSubmit()">
        <input formControlName="name" placeholder="Product Name" />
        <input formControlName="price" type="number" placeholder="Price" />
        <input formControlName="stock" type="number" placeholder="Stock" />
        <button type="submit" [disabled]="!productForm.valid || isLoading">Add Product</button>
      </form>
      <div *ngIf="errorMessage" class="error">{{ errorMessage }}</div>
      <div *ngIf="isLoading" class="loading">Loading...</div>
      <ul>
        <li *ngFor="let product of products">{{ product.name }} - ${{ product.price }}</li>
      </ul>
    </div>
  `
})
export class ProductManagementComponent implements OnInit, OnDestroy {
  productForm: FormGroup;
  products: Product[] = [];
  isLoading = false;
  errorMessage = '';
  private destroy$ = new Subject<void>();
  private apiUrl = 'https://api.example.com/products';

  constructor(
    private fb: FormBuilder,
    private http: HttpClient
  ) {
    this.productForm = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      price: [0, [Validators.required, Validators.min(0.01)]],
      stock: [0, [Validators.required, Validators.min(0)]]
    });
  }

  ngOnInit(): void {
    this.loadProducts();
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  loadProducts(): void {
    this.isLoading = true;
    this.errorMessage = '';

    this.http.get<ApiResponse<Product[]>>(this.apiUrl)
      .pipe(
        takeUntil(this.destroy$),
        catchError(this.handleError.bind(this)),
        finalize(() => this.isLoading = false)
      )
      .subscribe({
        next: (response) => {
          if (response.success) {
            this.products = response.data;
          } else {
            this.errorMessage = response.message || 'Failed to load products';
          }
        },
        error: (err) => {
          this.errorMessage = 'An unexpected error occurred';
          console.error('Error loading products:', err);
        }
      });
  }

  onSubmit(): void {
    if (this.productForm.invalid) {
      return;
    }

    this.isLoading = true;
    this.errorMessage = '';
    const newProduct = this.productForm.value;

    this.http.post<ApiResponse<Product>>(this.apiUrl, newProduct)
      .pipe(
        takeUntil(this.destroy$),
        catchError(this.handleError.bind(this)),
        finalize(() => this.isLoading = false)
      )
      .subscribe({
        next: (response) => {
          if (response.success) {
            this.products.push(response.data);
            this.productForm.reset();
          } else {
            this.errorMessage = response.message || 'Failed to add product';
          }
        },
        error: (err) => {
          this.errorMessage = 'Failed to create product';
          console.error('Error creating product:', err);
        }
      });
  }

  private handleError(error: HttpErrorResponse): Observable<any> {
    if (error.status === 0) {
      console.error('Network error:', error.error);
      this.errorMessage = 'Network error. Please check your connection.';
    } else if (error.status >= 400 && error.status < 500) {
      this.errorMessage = error.error?.message || 'Invalid request';
    } else if (error.status >= 500) {
      this.errorMessage = 'Server error. Please try again later.';
    }
    return of({ data: [], success: false, message: this.errorMessage });
  }
}