Biblia — Front Semi Sr Angular · Capgemini

@Component({
  selector: 'app-contador',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <p>{{ n() }} · doble: {{ doble() }} · {{ paridad() }}</p>
    <button (click)="n.update(v => v - 1)" [disabled]="n() === 0">−</button>
    <button (click)="n.update(v => v + 1)">+</button>
    <button (click)="n.set(0)">Reiniciar</button>`
})
export class Contador {
  n = signal(0);
  doble = computed(() => this.n() * 2);
  paridad = computed(() => this.n() % 2 === 0 ? 'par' : 'impar');
}

Si el producto ya está, usa map para devolver una línea nueva con cantidad + 1; si no, [...ls, { ...p, cantidad: 1 }].

type Linea = Producto & { cantidad: number };

export class Carrito {
  lineas = signal<Linea[]>([]);
  total = computed(() => this.lineas().reduce((s, l) => s + l.precio * l.cantidad, 0));
  puedeCobrar = computed(() => this.lineas().length > 0);

  agregar(p: Producto) {
    this.lineas.update(ls => ls.some(l => l.sku === p.sku)
      ? ls.map(l => l.sku === p.sku ? { ...l, cantidad: l.cantidad + 1 } : l)
      : [...ls, { ...p, cantidad: 1 }]);
  }
  quitar(sku: string) { this.lineas.update(ls => ls.filter(l => l.sku !== sku)); }
}
// plantilla
@for (l of lineas(); track l.sku) {
  <li>{{ l.nombre }} × {{ l.cantidad }} <button (click)="quitar(l.sku)">Quitar</button></li>
} @empty { <li>Carrito vacío</li> }
<p>Total: {{ total() | currency:'MXN' }}</p>
<button [disabled]="!puedeCobrar()">Cobrar</button>

@Component({
  selector: 'app-producto-card',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CurrencyPipe],
  template: `
    <h4>{{ producto().nombre }}</h4>
    <p>{{ producto().precio | currency:'MXN' }}</p>
    @if (agotado()) { <span>Agotado</span> }
    <button (click)="agregar.emit(producto())" [disabled]="agotado()">Agregar</button>`
})
export class ProductoCard {
  producto = input.required<Producto>();
  agregar = output<Producto>();
  agotado = computed(() => this.producto().existencia === 0);
}
// padre
@for (p of productos; track p.sku) {
  <app-producto-card [producto]="p" (agregar)="carrito.agregar($event)" />
}

// ui-card.ts — template
<header><ng-content select="[card-title]" /></header>
<section><ng-content /></section>
<footer><ng-content select="[card-actions]" /></footer>

// ui-card.scss
:host { display: block; background: var(--surface); border-radius: var(--radius); padding: var(--space-4); }
footer { display: flex; gap: var(--space-2); justify-content: flex-end; }

// styles.scss
:root { --surface: #fff; --radius: 8px; --space-2: 8px; --space-4: 16px; }

// uso
<ui-card>
  <h3 card-title>Pedido 1024</h3>
  <p>3 productos · $250</p>
  <button card-actions>Ver</button>
</ui-card>

Los 4 métodos: entra (writeValue), sale (registerOnChange), tocado (registerOnTouched), deshabilitar (setDisabledState).

@Component({
  selector: 'ui-cantidad',
  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UiCantidad), multi: true }],
  template: `
    <button type="button" (click)="cambiar(-1)" [disabled]="disabled()">−</button>
    <span>{{ valor() }}</span>
    <button type="button" (click)="cambiar(1)" [disabled]="disabled()">+</button>`
})
export class UiCantidad implements ControlValueAccessor {
  min = input(0);
  valor = signal(0);
  disabled = signal(false);
  private onChange = (v: number) => {};
  private onTouched = () => {};

  writeValue(v: number | null) { this.valor.set(v ?? 0); }
  registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
  registerOnTouched(fn: () => void) { this.onTouched = fn; }
  setDisabledState(d: boolean) { this.disabled.set(d); }

  cambiar(delta: number) {
    const v = Math.max(this.min(), this.valor() + delta);
    this.valor.set(v); this.onChange(v); this.onTouched();
  }
}

El estado de carga: tap antes de la petición y finalize dentro del switchMap.

@Component({
  selector: 'app-buscador',
  imports: [ReactiveFormsModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <input [formControl]="q" placeholder="Buscar producto" />
    @if (cargando()) { <p>Buscando…</p> }
    <ul>
      @for (p of resultados(); track p.sku) { <li>{{ p.nombre }}</li> }
      @empty { @if (q.value.length >= 2 && !cargando()) { <li>Sin resultados</li> } }
    </ul>`
})
export class Buscador {
  private api = inject(FakeApi);
  q = new FormControl('', { nonNullable: true });
  cargando = signal(false);

  resultados = toSignal(this.q.valueChanges.pipe(
    map(v => v.trim()),
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(q => {
      if (q.length < 2) return of([]);
      this.cargando.set(true);
      return this.api.buscar(q).pipe(
        catchError(() => of([])),
        finalize(() => this.cargando.set(false))
      );
    })
  ), { initialValue: [] as Producto[] });
}

export class Cobrar {
  private api = inject(FakeApi);
  private clics = new Subject<void>();
  guardados = signal(0);
  guardando = signal(false);

  constructor() {
    this.clics.pipe(
      exhaustMap(() => {
        this.guardando.set(true);
        return this.api.guardar().pipe(finalize(() => this.guardando.set(false)));
      }),
      takeUntilDestroyed()
    ).subscribe(() => this.guardados.update(n => n + 1));
  }
  cobrar() { this.clics.next(); }
}
// <button (click)="cobrar()">{{ guardando() ? 'Guardando…' : 'Cobrar' }}</button> Guardados: {{ guardados() }}

Resultado del experimento: exhaustMap → 1 · mergeMap → 5 casi a la vez · concatMap → 5, una tras otra (7.5 s).

export class Catalogos {
  private api = inject(FakeApi);
  error = signal(false);
  datos = toSignal(
    forkJoin({ categorias: this.api.categorias(), sucursales: this.api.sucursales() }).pipe(
      catchError(() => { this.error.set(true); return of(null); })
    )
  );
}
// @if (error()) { <p>No se pudo cargar</p> }
// @else if (datos(); as d) { {{ d.categorias.length }} categorías · {{ d.sucursales.length }} sucursales }
// @else { <p>Cargando…</p> }

export class Login {
  private fb = inject(NonNullableFormBuilder);
  form = this.fb.group({
    correo: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(8)]],
  });
  enviar() {
    if (this.form.invalid) { this.form.markAllAsTouched(); return; }
    console.log(this.form.getRawValue());
  }
}
// <form [formGroup]="form" (ngSubmit)="enviar()">
//   <input formControlName="correo" />
//   @if (form.controls.correo.touched && form.controls.correo.hasError('email')) { <small>Correo inválido</small> }
//   <input type="password" formControlName="password" />
//   @if (form.controls.password.touched && form.controls.password.hasError('minlength')) { <small>Mínimo 8</small> }
//   <button type="submit">Entrar</button>
// </form>

export function rfcValidator(): ValidatorFn {
  const re = /^[A-ZÑ&]{3,4}\d{6}[A-Z0-9]{3}$/;
  return (c: AbstractControl): ValidationErrors | null =>
    !c.value || re.test(String(c.value).toUpperCase()) ? null : { rfc: true };
}
// rfc: ['', [Validators.required, rfcValidator()]]

export class Pedido {
  private fb = inject(NonNullableFormBuilder);
  form = this.fb.group({
    proveedor: ['', Validators.required],
    lineas: this.fb.array([this.nuevaLinea()], Validators.minLength(1)),
  });
  get lineas() { return this.form.controls.lineas; }
  nuevaLinea() {
    return this.fb.group({ sku: ['', Validators.required], cantidad: [1, [Validators.required, Validators.min(1)]] });
  }
  agregar() { this.lineas.push(this.nuevaLinea()); }
  quitar(i: number) { this.lineas.removeAt(i); }
}
// <div formArrayName="lineas">
//   @for (l of lineas.controls; track l; let i = $index) {
//     <div [formGroupName]="i">
//       <input formControlName="sku" /> <input type="number" formControlName="cantidad" />
//       <button type="button" (click)="quitar(i)">Quitar</button>
//     </div>
//   }
// </div>
// <button type="button" (click)="agregar()">Agregar línea</button>
// <button [disabled]="form.invalid">Guardar</button>

export function rangoFechas(a: string, b: string): ValidatorFn {
  return (g: AbstractControl) => {
    const desde = g.get(a)?.value, hasta = g.get(b)?.value;
    return desde && hasta && desde > hasta ? { rango: true } : null;
  };
}
// form = this.fb.group({ desde: [''], hasta: [''] }, { validators: rangoFechas('desde', 'hasta') });
// @if (form.hasError('rango')) { <small>"Desde" debe ser antes de "hasta"</small> }

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('token');
  return next(token ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }) : req);
};

@Injectable({ providedIn: 'root' })
export class Loading { activas = signal(0); visible = computed(() => this.activas() > 0); }

export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
  const l = inject(Loading);
  l.activas.update(n => n + 1);
  return next(req).pipe(finalize(() => l.activas.update(n => n - 1)));
};

// app.config.ts
provideHttpClient(withInterceptors([authInterceptor, loadingInterceptor]))

// app.routes.ts
export const routes: Routes = [
  { path: 'productos', loadChildren: () => import('./features/productos/productos.routes').then(m => m.PRODUCTOS_ROUTES) },
  { path: 'pedidos', loadChildren: () => import('./features/pedidos/pedidos.routes').then(m => m.PEDIDOS_ROUTES) },
  { path: '', redirectTo: 'productos', pathMatch: 'full' },
];

// features/pedidos/pedidos.routes.ts
export const PEDIDOS_ROUTES: Routes = [
  { path: '', component: Pedido },
];

@Component({
  selector: 'app-precio', changeDetection: ChangeDetectionStrategy.OnPush,
  template: `Precio: {{ producto.precio }}`
})
export class Precio { @Input({ required: true }) producto!: Producto; }

// padre
subirMutando() { this.producto.precio++; }                       // misma referencia → OnPush no se entera
subirInmutable() { this.producto = { ...this.producto, precio: this.producto.precio + 1 }; }  // nueva referencia

Nota: el clic del padre sí dispara la detección de cambios, pero el hijo OnPush la salta porque su input tiene la misma referencia.

// src/main/resources/application.properties
quarkus.datasource.db-kind=h2
quarkus.datasource.jdbc.url=jdbc:h2:mem:farmacia
quarkus.hibernate-orm.database.generation=drop-and-create

// src/main/resources/import.sql
INSERT INTO Producto(id, sku, nombre, precio, existencia) VALUES (1, 'A1', 'Paracetamol 500mg', 35, 12);
INSERT INTO Producto(id, sku, nombre, precio, existencia) VALUES (2, 'A2', 'Paracetamol infantil', 48, 0);
INSERT INTO Producto(id, sku, nombre, precio, existencia) VALUES (3, 'B1', 'Ibuprofeno 400mg', 52, 8);
INSERT INTO Producto(id, sku, nombre, precio, existencia) VALUES (4, 'C1', 'Omeprazol 20mg', 89, 5);
ALTER SEQUENCE Producto_SEQ RESTART WITH 50;

// Producto.java
@Entity
public class Producto extends PanacheEntity {
  public String sku;
  public String nombre;
  public BigDecimal precio;
  public int existencia;
}

// ProductoResource.java
@Path("/productos")
public class ProductoResource {
  @GET
  public List<Producto> listar() { return Producto.listAll(); }
}

public record ProductoDto(Long id, String sku, String nombre, BigDecimal precio, boolean agotado) {
  static ProductoDto from(Producto p) {
    return new ProductoDto(p.id, p.sku, p.nombre, p.precio, p.existencia == 0);
  }
}

@ApplicationScoped
public class InventarioService {
  public List<ProductoDto> buscar(String q) {
    return Producto.<Producto>list("lower(nombre) like ?1", "%" + q.toLowerCase() + "%")
        .stream().map(ProductoDto::from).toList();
  }
  public ProductoDto obtener(Long id) {
    return Producto.<Producto>findByIdOptional(id)
        .map(ProductoDto::from)
        .orElseThrow(NotFoundException::new);         // jakarta.ws.rs.NotFoundException → 404
  }
}

@Path("/productos")
public class ProductoResource {
  @Inject InventarioService inventario;

  @GET
  public List<ProductoDto> buscar(@QueryParam("q") @DefaultValue("") String q) { return inventario.buscar(q); }

  @GET @Path("/{id}")
  public ProductoDto obtener(@PathParam("id") Long id) { return inventario.obtener(id); }
}

public record ProductoInput(@NotBlank String sku, @NotBlank String nombre,
                            @Positive BigDecimal precio, @PositiveOrZero int existencia) {}

// InventarioService
@Transactional
public ProductoDto crear(ProductoInput in) {
  var p = new Producto();
  p.sku = in.sku(); p.nombre = in.nombre(); p.precio = in.precio(); p.existencia = in.existencia();
  p.persist();
  return ProductoDto.from(p);
}

// ProductoResource
@POST
public Response crear(@Valid ProductoInput input) {
  var p = inventario.crear(input);
  return Response.created(URI.create("/productos/" + p.id())).entity(p).build();
}

public class StockInsuficienteException extends RuntimeException {
  public StockInsuficienteException(String sku, int hay, int pides) {
    super("Stock insuficiente de %s: hay %d, pides %d".formatted(sku, hay, pides));
  }
}

// InventarioService
@Transactional
public ProductoDto descontar(Long id, int cantidad) {
  Producto p = Producto.<Producto>findByIdOptional(id).orElseThrow(NotFoundException::new);
  if (cantidad > p.existencia) throw new StockInsuficienteException(p.sku, p.existencia, cantidad);
  p.existencia -= cantidad;                        // entidad administrada: se guarda al cerrar la transacción
  return ProductoDto.from(p);
}

// ProductoResource
@POST @Path("/{id}/descontar")
public ProductoDto descontar(@PathParam("id") Long id, @QueryParam("cantidad") int cantidad) {
  return inventario.descontar(id, cantidad);
}

// ErroresMapper.java
public class ErroresMapper {
  @ServerExceptionMapper
  public RestResponse<Map<String, String>> stock(StockInsuficienteException e) {
    return RestResponse.status(Response.Status.CONFLICT, Map.of("error", e.getMessage()));
  }
}

@QuarkusTest
class ProductoResourceTest {
  @Test
  void buscaPorNombre() {
    given().queryParam("q", "para")
      .when().get("/productos")
      .then().statusCode(200).body("size()", is(2));
  }

  @Test
  void idInexistenteDevuelve404() {
    given().when().get("/productos/9999").then().statusCode(404);
  }

  @Test
  void precioNegativoDevuelve400() {
    given().contentType(ContentType.JSON)
      .body("{\"sku\":\"X1\",\"nombre\":\"Prueba\",\"precio\":-5,\"existencia\":1}")
      .when().post("/productos")
      .then().statusCode(400);
  }
}
// imports: static io.restassured.RestAssured.given · static org.hamcrest.Matchers.is · io.restassured.http.ContentType

# application.properties (Quarkus)
%dev.quarkus.http.cors.enabled=true
%dev.quarkus.http.cors.origins=http://localhost:4200
# en versiones anteriores de Quarkus 3: quarkus.http.cors=true

// Angular: productos-api.ts
export interface ProductoDto { id: number; sku: string; nombre: string; precio: number; agotado: boolean; }

@Injectable({ providedIn: 'root' })
export class ProductosApi {
  private http = inject(HttpClient);
  buscar(q: string) {
    return this.http.get<ProductoDto[]>('http://localhost:8080/productos', { params: { q } });
  }
}
// app.config.ts: provideHttpClient()
// En el buscador: inject(ProductosApi) en lugar de FakeApi; el resto del pipe no cambia.