# Angular Moderno — Ejemplos avanzados

## Host bindings

```typescript
@Component({
  selector: 'app-badge',
  template: `{{ texto() }}`,
  host: {
    // Clases estáticas
    'class': 'inline-flex items-center px-2 py-1 rounded text-sm font-medium',
    // Bindings dinámicos
    '[class.bg-green-100]': "tipo() === 'exito'",
    '[class.bg-red-100]': "tipo() === 'error'",
    '[class.bg-yellow-100]': "tipo() === 'advertencia'",
    '[attr.role]': '"status"',
    '[attr.aria-label]': 'texto()',
  },
})
export class BadgeComponent {
  readonly texto = input.required<string>();
  readonly tipo = input<'exito' | 'error' | 'advertencia'>('exito');
}
```

---

## Services con Signals — ejemplo completo

```typescript
import { Injectable, signal, computed } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Injectable({ providedIn: 'root' })
export class FacturasStore {
  private readonly http = inject(HttpClient);
  private readonly destroyRef = inject(DestroyRef);

  // Estado interno
  private readonly _facturas = signal<Factura[]>([]);
  private readonly _cargando = signal(false);
  private readonly _error = signal<string | null>(null);

  // API pública
  readonly facturas = this._facturas.asReadonly();
  readonly cargando = this._cargando.asReadonly();
  readonly error = this._error.asReadonly();
  readonly totalEmitidas = computed(() =>
    this._facturas().filter(f => f.estatus === 'emitida').length
  );

  cargar(): void {
    this._cargando.set(true);
    this._error.set(null);
    this.http.get<PaginatedResponse<Factura>>('/api/v1/facturas/')
      .pipe(
        map(resp => resp.items),
        takeUntilDestroyed(this.destroyRef),
      )
      .subscribe({
        next: facturas => {
          this._facturas.set(facturas);
          this._cargando.set(false);
        },
        error: err => {
          this._error.set(err.message);
          this._cargando.set(false);
        },
      });
  }
}
```

---

## Formularios reactivos — ejemplo completo

```typescript
import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule],
  ...
})
export class FacturaFormComponent {
  private readonly fb = inject(FormBuilder);

  readonly form = this.fb.group({
    folio: ['', [Validators.required, Validators.maxLength(20)]],
    // MatDatepicker OBLIGATORIO — NUNCA <input type="date">
    fecha: [new Date(), Validators.required],
    monto: [null as number | null, [Validators.required, Validators.min(0.01)]],
    estatus: ['borrador' as 'borrador' | 'emitida', Validators.required],
  });

  get folioControl() { return this.form.controls.folio; }

  onSubmit(): void {
    if (this.form.invalid) return;
    const datos = this.form.getRawValue();
    // ...
  }
}
```
