Programmieren Sie die Zukunft mit Angular

import { Component, signal, computed, effect } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductService } from './product.service';

@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="product-grid">
      <div *ngFor="let product of filteredProducts()" class="card">
        <h3>{{ product.name }}</h3>
        <p>{{ product.price | currency:'TRY' }}</p>
        <button (click)="addToCart(product)">Sepete Ekle</button>
      </div>
    </div>
    <div class="summary">
      Toplam: {{ totalPrice() | currency:'TRY' }}
    </div>
  `
})
export class ProductListComponent {
  // 2026: Signals ile Reaktif State Verwaltungi
  products = signal<Product[]>([]);
  searchQuery = signal('');
  cart = signal<Product[]>([]);

  // Computed Signals: Otomatik hesaplanan değerler
  totalPrice = computed(() =>
    this.cart().reduce((acc, curr) => acc + curr.price, 0)
  );

  filteredProducts = computed(() => {
    const query = this.searchQuery().toLowerCase();
    return this.products().filter(p => p.name.toLowerCase().includes(query));
  });

  constructor(private productService: ProductService) {
    // Effect: Yan etkileri yönetme (örn: loglama, API senkronizasyonu)
    effect(() => {
      console.log(`Sepet Tagcellendi. Yeni tutar: ${this.totalPrice()}`);
    });

    this.loadProducts();
  }

  async loadProducts() {
    const data = await this.productService.getAll();
    this.products.set(data);
  }

  addToCart(item: Product) {
    this.cart.update(items => [...items, item]);
  }
}