Komponent arxitekturasi

// Dumb — faqat ko'rsatish
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

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

@Component({
  selector: 'app-product-card',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <article class="card">
      <h3>{{ product.name }}</h3>
      <p>{{ product.price | currency:'UZS':'symbol':'1.0-0' }}</p>
      <button type="button" (click)="addToCart.emit(product.id)">
        Savatga
      </button>
    </article>
  `,
  imports: [CurrencyPipe],
})
export class ProductCardComponent {
  @Input({ required: true }) product!: Product;
  @Output() addToCart = new EventEmitter<number>();
}

// Smart — data va logika
import { Component, inject, Output, EventEmitter } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { ProductCardComponent, Product } from './product-card.component';
import { ProductService } from './product.service';
import { CartService } from './cart.service';

@Component({
  selector: 'app-product-list-page',
  standalone: true,
  imports: [ProductCardComponent, AsyncPipe],
  template: `
    @if (products$ | async; as products) {
      <div class="grid">
        @for (p of products; track p.id) {
          <app-product-card
            [product]="p"
            (addToCart)="onAddToCart($event)"
          />
        }
      </div>
    }
  `,
})
export class ProductListPageComponent {
  private productService = inject(ProductService);
  private cartService = inject(CartService);

  products$ = this.productService.getProducts();

  onAddToCart(productId: number): void {
    this.cartService.add(productId);
  }
}

import { Component, inject, input, output, computed } from '@angular/core';

interface UserForm {
  name: string;
  email: string;
}

@Component({
  selector: 'app-user-form',
  standalone: true,
  template: `
    <form (ngSubmit)="submit()">
      <input [value]="value().name"
             (input)="patch({ name: $any($event.target).value })" />
      <input [value]="value().email"
             (input)="patch({ email: $any($event.target).value })" />
      <button type="submit" [disabled]="!isValid()">Saqlash</button>
      <button type="button" (click)="cancelled.emit()">Bekor</button>
    </form>
  `,
})
export class UserFormComponent {
  // Signal-based Input/Output (Angular 17.1+)
  value = input.required<UserForm>();
  save = output<UserForm>();
  cancelled = output<void>();

  isValid = computed(() =>
    this.value().name.trim().length > 0 &&
    this.value().email.includes('@')
  );

  private patch(partial: Partial<UserForm>): void {
    // Child Input'ni mutate qilmaydi — event yuboradi
    this.save.emit({ ...this.value(), ...partial });
  }

  submit(): void {
    if (this.isValid()) {
      this.save.emit(this.value());
    }
  }
}

// Parent — state egasi
@Component({
  selector: 'app-user-page',
  standalone: true,
  imports: [UserFormComponent],
  template: `
    <app-user-form
      [value]="formState"
      (save)="onSave($event)"
      (cancelled)="onCancel()"
    />
  `,
})
export class UserPageComponent {
  formState: UserForm = { name: '', email: '' };

  onSave(data: UserForm): void {
    this.formState = { ...data }; // immutable update
    console.log('Saqlash:', data);
  }

  onCancel(): void {
    this.formState = { name: '', email: '' };
  }
}

// Shared notification service
import { Injectable, signal, computed } from '@angular/core';

export interface Toast {
  id: number;
  message: string;
  type: 'success' | 'error';
}

@Injectable({ providedIn: 'root' })
export class ToastService {
  private toasts = signal<Toast[]>([]);
  readonly items = computed(() => this.toasts());

  show(message: string, type: Toast['type'] = 'success'): void {
    const id = Date.now();
    this.toasts.update((list) => [...list, { id, message, type }]);
    setTimeout(() => this.dismiss(id), 4000);
  }

  dismiss(id: number): void {
    this.toasts.update((list) => list.filter((t) => t.id !== id));
  }
}

// Producer — Smart komponent
@Component({
  selector: 'app-checkout',
  standalone: true,
  template: `<button type="button" (click)="pay()">To'lash</button>`,
})
export class CheckoutComponent {
  private toast = inject(ToastService);
  private orderService = inject(OrderService);

  pay(): void {
    this.orderService.submit().subscribe({
      next: () => this.toast.show('Buyurtma qabul qilindi'),
      error: () => this.toast.show('Xato yuz berdi', 'error'),
    });
  }
}

// Consumer — Dumb komponent (global toast)
@Component({
  selector: 'app-toast-container',
  standalone: true,
  template: `
    <div class="toast-stack">
      @for (t of toastService.items(); track t.id) {
        <div [class]="'toast toast-' + t.type">{{ t.message }}</div>
      }
    </div>
  `,
})
export class ToastContainerComponent {
  toastService = inject(ToastService);
}