Biblia — Desarrollador Front Semi Sr Angular

Cómo hablar

Las tres reglas de tu ex jefe. Un Semi Sr se distingue de un Jr por cómo explica, no por cuántas APIs recita.

Tu frase de contexto (úsala para abrir cualquier respuesta técnica)

Cuando no sabes (plantillas)

Arquitectura modular — Core, Shared, Feature

La vacante dice "Core, Shared, Feature Modules", pero pide Angular 20, donde lo estándar ya son componentes standalone. La respuesta que te distingue: la idea de las tres capas sigue viva; lo que cambió es cómo se implementa.

¿Cómo organizas una aplicación Angular grande?

Estructura de carpetas que puedes dibujar

src/app/
  core/
    interceptors/   auth.interceptor.ts · error.interceptor.ts
    guards/         auth.guard.ts
    services/       session.service.ts · notification.service.ts
    layout/         shell.component.ts
  shared/
    ui/             button/ · data-table/ · form-field/ · modal/
    pipes/          currency-mx.pipe.ts
    directives/     autofocus.directive.ts
    validators/     rfc.validator.ts
    models/         paged-result.ts
  features/
    pedidos/
      pedidos.routes.ts        ← lazy
      data/  pedidos.api.ts    ← HTTP del feature
      state/ pedidos.store.ts  ← signals
      pages/ lista-pedidos/ · detalle-pedido/
      ui/    pedido-card/      ← presentacionales del feature
  app.config.ts · app.routes.ts

// app.routes.ts
export const routes: Routes = [
  { path: '', component: ShellComponent, canActivate: [authGuard], children: [
    { path: 'pedidos', loadChildren: () => import('./features/pedidos/pedidos.routes')
                                            .then(m => m.PEDIDOS_ROUTES) },
    { path: 'inventario', loadComponent: () => import('./features/inventario/inventario.page')
                                            .then(m => m.InventarioPage) },
  ]},
  { path: '**', redirectTo: '' }
];

// features/pedidos/pedidos.routes.ts
export const PEDIDOS_ROUTES: Routes = [
  { path: '', providers: [PedidosStore],      // estado vive mientras vives en el feature
    children: [
      { path: '', component: ListaPedidosPage },
      { path: ':id', component: DetallePedidoPage, resolve: { pedido: pedidoResolver } },
    ]}
];

Repreguntas

Signals — estado en componentes

Es la pregunta obligada de Angular 20. Ten claro: qué es, las 5 primitivas, cuándo no usar effect, y cómo convive con RxJS.

¿Qué es un signal y por qué existe?

Las primitivas

@Component({
  selector: 'app-carrito',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @for (l of lineas(); track l.sku) {
      <app-linea [linea]="l" (quitar)="quitar(l.sku)" />
    } @empty { <p>Carrito vacío</p> }
    <p>Total: {{ total() | currency:'MXN' }}</p>
    <button [disabled]="!puedeCobrar()">Cobrar</button>`
})
export class CarritoComponent {
  lineas = signal<Linea[]>([]);
  total = computed(() => this.lineas().reduce((s, l) => s + l.precio * l.cantidad, 0));
  puedeCobrar = computed(() => this.lineas().length > 0 && this.total() > 0);

  agregar(l: Linea) { this.lineas.update(ls => [...ls, l]); }       // inmutable
  quitar(sku: string) { this.lineas.update(ls => ls.filter(x => x.sku !== sku)); }
}

Repreguntas

private q = signal('');
resultados = toSignal(
  toObservable(this.q).pipe(
    debounceTime(300), distinctUntilChanged(),
    switchMap(q => q.length < 3 ? of([]) : this.api.buscar(q))
  ), { initialValue: [] as Producto[] }
);

RxJS — flujos asíncronos y eventos

¿Observable vs Promesa?

Los 4 operadores de aplanado (la pregunta más común)

Combinar flujos

Subjects

Fugas de memoria — cómo te desuscribes

1. async pipe o toSignal — se desuscriben solos. Primera opción.
2. takeUntilDestroyed() (Angular 16+) — en contexto de inyección, o pasándole DestroyRef.
3. El patrón viejo: takeUntil(this.destroy$) + ngOnDestroy. Es el que tiene el buscador compartido del backoffice.

export class MonitorComponent {
  private api = inject(PedidosApi);
  constructor() {
    interval(30_000).pipe(
      startWith(0),
      switchMap(() => this.api.pendientes()),
      takeUntilDestroyed()
    ).subscribe(p => this.pendientes.set(p));
  }
  pendientes = signal<Pedido[]>([]);
}

Manejo de errores

this.api.buscar(q).pipe(
  retry({ count: 2, delay: 1000 }),          // reintenta solo errores transitorios
  catchError(err => {                        // DENTRO del switchMap: el flujo externo sobrevive
    this.error.set('No se pudo buscar');
    return of([]);
  })
)

fromEvent<InputEvent>(this.input().nativeElement, 'input').pipe(
  map(e => (e.target as HTMLInputElement).value.trim()),
  debounceTime(300), distinctUntilChanged(), filter(q => q.length >= 3),
  switchMap(q => this.api.buscar(q).pipe(catchError(() => of([])))),
  takeUntilDestroyed(this.destroyRef)
).subscribe(r => this.resultados.set(r));

Reactive Forms

Aquí tienes ventaja real: el backoffice usa Reactive Forms en todos lados. Lo que un Semi Sr debe mostrar: formularios tipados, validadores propios, validación cruzada, asíncrona y FormArray.

¿Template-driven vs Reactive?

El formulario completo que tienes que poder teclear

type LineaForm = FormGroup<{
  sku: FormControl<string>;
  cantidad: FormControl<number>;
}>;

@Component({ /* ... */ imports: [ReactiveFormsModule] })
export class PedidoFormComponent {
  private fb = inject(NonNullableFormBuilder);   // no-nullable: reset() vuelve al inicial, no a null
  private api = inject(ProveedoresApi);

  form = this.fb.group({
    proveedor: this.fb.control('', {
      validators: [Validators.required],
      asyncValidators: [proveedorExiste(this.api)],
      updateOn: 'blur'                           // el async no pega al servidor en cada tecla
    }),
    rfc: ['', [Validators.required, rfcValidator()]],
    fechaEntrega: ['', Validators.required],
    fechaLimite: ['', Validators.required],
    lineas: this.fb.array<LineaForm>([], Validators.minLength(1)),
  }, { validators: rangoFechas('fechaEntrega', 'fechaLimite') });

  get lineas() { return this.form.controls.lineas; }

  agregarLinea() {
    this.lineas.push(this.fb.group({
      sku: ['', Validators.required],
      cantidad: [1, [Validators.required, Validators.min(1)]],
    }));
  }
  quitarLinea(i: number) { this.lineas.removeAt(i); }

  guardar() {
    if (this.form.invalid) { this.form.markAllAsTouched(); return; }
    const pedido = this.form.getRawValue();       // tipado; incluye campos deshabilitados
    // ...
  }
}

<form [formGroup]="form" (ngSubmit)="guardar()">
  <input formControlName="rfc" />
  @if (form.controls.rfc.touched && form.controls.rfc.hasError('rfc')) {
    <small>RFC inválido</small>
  }
  @if (form.hasError('rangoFechas')) { <small>La entrega debe ser antes del límite</small> }

  <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)="quitarLinea(i)">Quitar</button>
      </div>
    }
  </div>
  <button type="button" (click)="agregarLinea()">Agregar línea</button>
  <button type="submit" [disabled]="form.pending">Guardar</button>
</form>

Validadores

// Síncrono, de un control
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(c.value.toUpperCase()) ? null : { rfc: true };
}

// Cruzado, a nivel de grupo
export function rangoFechas(desde: string, hasta: string): ValidatorFn {
  return (g: AbstractControl) => {
    const a = g.get(desde)?.value, b = g.get(hasta)?.value;
    return a && b && a > b ? { rangoFechas: true } : null;
  };
}

// Asíncrono
export function proveedorExiste(api: ProveedoresApi): AsyncValidatorFn {
  return (c) => !c.value ? of(null) : api.existe(c.value).pipe(
    map(ok => ok ? null : { proveedorNoExiste: true }),
    catchError(() => of(null))                    // si el servicio falla, no bloquees el form
  );
}

Repreguntas

// Si el tipo de pago es tarjeta, habilita "referencia" y hazla obligatoria
this.form.controls.tipoPago.valueChanges.pipe(takeUntilDestroyed()).subscribe(tipo => {
  const ref = this.form.controls.referencia;
  if (tipo === 'tarjeta') { ref.enable(); ref.addValidators(Validators.required); }
  else { ref.disable(); ref.removeValidators(Validators.required); ref.reset(); }
  ref.updateValueAndValidity();
});

Componentes reutilizables y sistemas de UI

Es la "actividad a desempeñar" principal: componentes reutilizables y sistemas de UI escalables, mantenibilidad y consistencia del diseño. Van a querer ver que sabes hacer una pieza que otros usan sin leer su código.

¿Qué hace reutilizable a un componente?

1. API: input, output, model

@Component({
  selector: 'ui-button',
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { '[class]': '"btn btn-" + variant()', '[attr.aria-busy]': 'loading()' },
  template: `
    <button [type]="type()" [disabled]="disabled() || loading()" (click)="clicked.emit($event)">
      @if (loading()) { <span class="spinner" aria-hidden="true"></span> }
      <ng-content />
    </button>`
})
export class UiButton {
  variant = input<'primary' | 'secondary' | 'danger'>('primary');
  type = input<'button' | 'submit'>('button');
  disabled = input(false, { transform: booleanAttribute });   // permite <ui-button disabled>
  loading = input(false, { transform: booleanAttribute });
  clicked = output<MouseEvent>();
}

2. Content projection

<!-- ui-card.html -->
<header><ng-content select="[card-title]" /></header>
<section><ng-content /></section>
<footer><ng-content select="[card-actions]" /></footer>

<!-- uso -->
<ui-card>
  <h3 card-title>Pedido 1024</h3>
  <p>3 líneas · $1,250</p>
  <ui-button card-actions (clicked)="ver()">Ver</ui-button>
</ui-card>

Para tablas reutilizables donde el que usa decide cómo pintar cada celda: ng-template + ngTemplateOutlet con contexto (let-row). Es el patrón de mat-table.

3. ControlValueAccessor (la pregunta de Semi Sr)

@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) => void = () => {};
  private onTouched: () => void = () => {};

  writeValue(v: number | null) { this.valor.set(v ?? 0); }             // form → componente
  registerOnChange(fn: (v: number) => void) { this.onChange = fn; }    // componente → form
  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();
  }
}
// uso: <ui-cantidad formControlName="cantidad" [min]="1" />

4. Consistencia de diseño — tokens

/* styles/tokens.scss */
:root {
  --color-primary: #1f5fa8; --color-danger: #b3261e;
  --space-2: 8px; --space-4: 16px; --radius: 8px;
  --font-body: 14px/1.5 system-ui;
}
/* ui-button.scss — solo tokens, nunca hex sueltos */
:host { display: inline-block; }
.btn-primary button { background: var(--color-primary); padding: var(--space-2) var(--space-4); border-radius: var(--radius); }

• Encapsulación: Emulated (default) aísla estilos; :host estiliza el propio elemento; no uses ::ng-deep (deprecado) — expón variables CSS.
• Material: en Angular Material 3 el tema se personaliza con tokens (mat.theme(...) y overrides) en vez de sobrescribir clases internas.
• Documentar: Storybook para catálogo y estados. Si no lo usaste, dilo: "En el backoffice la documentación era el propio código de la librería; Storybook es lo siguiente que pondría para que diseño y desarrollo vean los mismos estados."

Repreguntas

@Directive({ selector: '[appSiPermiso]' })
export class SiPermisoDirective {
  private tpl = inject(TemplateRef); private vcr = inject(ViewContainerRef);
  private sesion = inject(SesionService);
  permiso = input.required<string>({ alias: 'appSiPermiso' });
  constructor() {
    effect(() => {
      this.vcr.clear();
      if (this.sesion.tiene(this.permiso())) this.vcr.createEmbeddedView(this.tpl);
    });
  }
}
// <button *appSiPermiso="'pedidos.cancelar'">Cancelar</button>

APIs REST e interceptores HTTP

¿Cómo organizas el consumo de APIs?

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes, withComponentInputBinding()),
    provideHttpClient(withInterceptors([authInterceptor, loadingInterceptor, errorInterceptor])),
  ]
};

// features/pedidos/data/pedidos.api.ts
@Injectable({ providedIn: 'root' })
export class PedidosApi {
  private http = inject(HttpClient);
  private base = `${environment.apiUrl}/pedidos`;

  listar(f: FiltroPedidos) {
    const params = new HttpParams({ fromObject: { page: f.page, size: f.size, estatus: f.estatus ?? '' } });
    return this.http.get<PagedResult<Pedido>>(this.base, { params });
  }
  obtener(id: number) { return this.http.get<Pedido>(`${this.base}/${id}`); }
  crear(p: NuevoPedido) { return this.http.post<Pedido>(this.base, p); }
  actualizar(id: number, p: NuevoPedido) { return this.http.put<void>(`${this.base}/${id}`, p); }
  eliminar(id: number) { return this.http.delete<void>(`${this.base}/${id}`); }
}

Los tres interceptores que siempre te piden

// 1. Token
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(SesionService).token();
  if (!token || req.url.includes('/auth/')) return next(req);
  return next(req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }));   // req es inmutable
};

// 2. Loading global con opción de excluir
export const SIN_LOADING = new HttpContextToken<boolean>(() => false);
export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.context.get(SIN_LOADING)) return next(req);
  const loading = inject(LoadingService);
  loading.inc();
  return next(req).pipe(finalize(() => loading.dec()));      // contador, no booleano
};
// uso: this.http.get(url, { context: new HttpContext().set(SIN_LOADING, true) })

// 3. Errores centralizados
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const router = inject(Router); const notif = inject(NotificacionService);
  return next(req).pipe(catchError((e: HttpErrorResponse) => {
    if (e.status === 401) router.navigate(['/login']);
    else if (e.status === 403) notif.error('No tienes permiso');
    else if (e.status === 0) notif.error('Sin conexión con el servidor');
    else if (e.status >= 500) notif.error('Error del servidor, intenta de nuevo');
    return throwError(() => e);        // re-lanza: el que llamó decide si hace algo más
  }));
};

Repreguntas

Optimización de rendimiento — OnPush, lazy loading, trackBy

¿Cómo optimizas una app Angular?

OnPush

Con ChangeDetectionStrategy.OnPush Angular revisa el componente solo cuando:

1. Cambia la referencia de un input (no si mutas el objeto por dentro).
2. Ocurre un evento en su plantilla o en sus hijos.
3. Emite un observable con async pipe, o cambia un signal que la plantilla lee.
4. Llamas markForCheck() a mano.

trackBy → track

<!-- Angular 17+: track es OBLIGATORIO en @for -->
@for (p of pedidos(); track p.id) { <app-pedido-card [pedido]="p" /> }

<!-- Equivalente viejo -->
<app-pedido-card *ngFor="let p of pedidos; trackBy: porId" [pedido]="p" />
porId = (_: number, p: Pedido) => p.id;

Lazy loading y @defer

{ path: 'reportes', loadComponent: () => import('./features/reportes/reportes.page').then(m => m.ReportesPage) }

@defer (on viewport; prefetch on idle) {
  <app-grafica-ventas [datos]="ventas()" />     <!-- su código va en otro chunk -->
} @placeholder (minimum 300ms) {
  <div class="skeleton"></div>
} @loading (after 150ms) {
  <app-spinner />
} @error { <p>No se pudo cargar la gráfica</p> }

Triggers de @defer: on idle (default), viewport, interaction, hover, immediate, timer(2s), when condicion. Estrategias de precarga de rutas: withPreloading(PreloadAllModules) o una propia.

Más cosas que suman puntos

Ejercicios escritos — para teclear

Tu última entrevista fue teclear un componente completo. Estos seis cubren los imprescindibles de la vacante. Protocolo para cada uno: (1) repite el enunciado con tus palabras, (2) pregunta restricciones (¿Material? ¿puedo usar HttpClient? ¿versión?), (3) di la estructura antes de teclear, (4) narra mientras escribes.

export interface Producto { sku: string; nombre: string; precio: number; }
export abstract class BuscadorProductos {                  // abstracción: no dependo de HttpClient
  abstract buscar(q: string): Observable<Producto[]>;
}

@Component({
  selector: 'app-buscador',
  imports: [ReactiveFormsModule, CurrencyPipe],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <input [formControl]="q" placeholder="Buscar (mín. 3 letras)" aria-label="Buscar producto" />
    @if (cargando()) { <p>Buscando…</p> }
    @if (error()) { <p role="alert">{{ error() }}</p> }
    <ul>
      @for (p of resultados(); track p.sku) {
        <li (click)="elegido.emit(p)">{{ p.nombre }} — {{ p.precio | currency:'MXN' }}</li>
      } @empty { @if (buscado()) { <li>Sin resultados</li> } }
    </ul>`
})
export class BuscadorComponent {
  private api = inject(BuscadorProductos);
  elegido = output<Producto>();
  q = new FormControl('', { nonNullable: true });
  cargando = signal(false);
  error = signal<string | null>(null);
  buscado = signal(false);

  resultados = toSignal(
    this.q.valueChanges.pipe(
      map(v => v.trim()),
      debounceTime(300),
      distinctUntilChanged(),
      tap(() => this.error.set(null)),
      switchMap(q => {
        if (q.length < 3) { this.buscado.set(false); return of([]); }
        this.cargando.set(true);
        return this.api.buscar(q).pipe(
          catchError(() => { this.error.set('No se pudo buscar'); return of([]); }),
          finalize(() => { this.cargando.set(false); this.buscado.set(true); })
        );
      })
    ), { initialValue: [] as Producto[] }
  );
}
// provider: { provide: BuscadorProductos, useClass: BuscadorProductosHttp }

@Injectable()   // provisto en la ruta del feature
export class PedidosStore {
  private api = inject(PedidosApi);
  readonly estatus = signal<string | null>(null);
  readonly pagina = linkedSignal({ source: this.estatus, computation: () => 1 });  // se resetea
  readonly tamano = signal(20);

  private resp = toSignal(
    toObservable(computed(() => ({ page: this.pagina(), size: this.tamano(), estatus: this.estatus() }))).pipe(
      tap(() => this.cargando.set(true)),
      switchMap(f => this.api.listar(f).pipe(
        catchError(() => of({ items: [], total: 0 } as PagedResult<Pedido>)),
        finalize(() => this.cargando.set(false))
      ))
    ), { initialValue: { items: [], total: 0 } as PagedResult<Pedido> }
  );

  readonly cargando = signal(false);
  readonly pedidos = computed(() => this.resp().items);
  readonly totalPaginas = computed(() => Math.max(1, Math.ceil(this.resp().total / this.tamano())));
  readonly hayAnterior = computed(() => this.pagina() > 1);
  readonly haySiguiente = computed(() => this.pagina() < this.totalPaginas());

  filtrar(e: string | null) { this.estatus.set(e); }
  siguiente() { if (this.haySiguiente()) this.pagina.update(p => p + 1); }
  anterior() { if (this.hayAnterior()) this.pagina.update(p => p - 1); }
}

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <select (change)="store.filtrar($any($event.target).value || null)">
      <option value="">Todos</option><option value="PENDIENTE">Pendiente</option>
    </select>
    <table><tbody>
      @for (p of store.pedidos(); track p.id) {
        <tr><td>{{ p.folio }}</td><td>{{ p.estatus }}</td></tr>
      }
    </tbody></table>
    <button (click)="store.anterior()" [disabled]="!store.hayAnterior()">‹</button>
    {{ store.pagina() }} / {{ store.totalPaginas() }}
    <button (click)="store.siguiente()" [disabled]="!store.haySiguiente()">›</button>`
})
export class ListaPedidosPage { store = inject(PedidosStore); }

@Component({
  selector: 'app-producto-card',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CurrencyPipe],
  template: `
    <h4>{{ producto().nombre }}</h4>
    <p>{{ producto().precio | currency:'MXN' }}</p>
    <button (click)="agregar.emit(producto())" [disabled]="agotado()">Agregar</button>`
})
export class ProductoCard {
  producto = input.required<Producto & { existencia: number }>();
  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)" /> }

Si te ponen una restricción rara

Testing

No está en la lista, pero en consultoras casi siempre preguntan "¿haces pruebas unitarias?". Tu experiencia real: Karma + Jasmine en el backoffice, Jest lo conoces, SonarQube para cobertura.

// Componente con signals
describe('CarritoComponent', () => {
  it('calcula el total y habilita cobrar', () => {
    const f = TestBed.createComponent(CarritoComponent);
    f.componentInstance.agregar({ sku: 'A', precio: 10, cantidad: 3 });
    f.detectChanges();
    expect(f.componentInstance.total()).toBe(30);
    expect(f.nativeElement.querySelector('button').disabled).toBeFalse();
  });
});

// Servicio HTTP
beforeEach(() => TestBed.configureTestingModule({
  providers: [provideHttpClient(), provideHttpClientTesting()]
}));
it('lista pedidos con params', () => {
  const api = TestBed.inject(PedidosApi), http = TestBed.inject(HttpTestingController);
  api.listar({ page: 2, size: 20 }).subscribe(r => expect(r.total).toBe(1));
  const req = http.expectOne(r => r.url.endsWith('/pedidos') && r.params.get('page') === '2');
  req.flush({ items: [{ id: 1 }], total: 1 });
  http.verify();
});

// Buscador con debounce
it('no busca antes de 300 ms', fakeAsync(() => {
  comp.q.setValue('para'); tick(299); expect(api.buscar).not.toHaveBeenCalled();
  tick(1); expect(api.buscar).toHaveBeenCalledOnceWith('para');
}));

Java 20 · Quarkus — deseable

No lo usas y no tienes que fingirlo. El objetivo es que si preguntan no te quedes en blanco, y que se note que un backend Java no te asusta porque vienes de .NET, que es casi el mismo mundo.

Tabla de traducción .NET → Java/Quarkus

@Path("/pedidos")
@Produces(MediaType.APPLICATION_JSON)
public class PedidoResource {
  @Inject PedidoService service;

  @GET @Path("/{id}")
  public Response obtener(@PathParam("id") long id) {
    return service.buscar(id)
        .map(p -> Response.ok(p).build())
        .orElse(Response.status(404).build());
  }
}
public record PedidoDto(long id, String folio, BigDecimal total) {}

Java moderno en tres frases

• 21 es la LTS actual que usan los proyectos nuevos; 20 fue un paso intermedio de seis meses.
• Virtual threads: hilos ligeros que permiten escribir código bloqueante simple con alta concurrencia (la intención se parece a async/await). En 20 todavía eran preview.
• Records, pattern matching en switch, sealed classes: el Java moderno se parece bastante a C#.

Guion hablado y STAR

"Cuéntame de ti" (60–90 s)

Preguntas de la reclutadora

Historias STAR (una por imprescindible)

Tus preguntas al final (elige 3)

• ¿El proyecto es nuevo o es mantenimiento de una app existente? ¿En qué versión de Angular está?
• ¿Tienen un design system o librería de componentes propia, o la vamos a construir?
• ¿Cómo manejan el estado: servicios con signals, NgRx, SignalStore?
• ¿Cómo es el equipo: cuántos front, hay diseñador, quién define la arquitectura?
• ¿Qué tan seguido se va a oficina y depende del cliente o de Capgemini?
• ¿Cómo miden que alguien lo está haciendo bien los primeros tres meses?

Simulacro — 20 preguntas en voz alta

Graba tu voz o pídele a alguien que te las lea. Cada una en menos de 60 segundos, con el molde. Si titubeas, vuelve a la pestaña y repite.

1. ¿Cómo estructuras un proyecto Angular grande? (Core/Shared/Feature)
2. ¿Qué cambió con los componentes standalone? ¿Siguen existiendo los NgModules?
3. ¿Qué es un signal? ¿Diferencia entre signal, computed y effect?
4. ¿Cuándo NO usarías effect?
5. ¿Signals reemplaza a RxJS? ¿Cómo los conectas?
6. Diferencia entre switchMap, mergeMap, concatMap y exhaustMap, con un caso de cada uno.
7. ¿Cómo evitas fugas de memoria con observables?
8. ¿forkJoin vs combineLatest?
9. ¿Reactive Forms vs template-driven?
10. ¿Cómo haces un validador personalizado? ¿Y uno que compare dos campos? ¿Y uno asíncrono?
11. ¿Qué es ControlValueAccessor y para qué sirve?
12. ¿Qué hace reutilizable a un componente?
13. ¿Cómo mantienes la consistencia visual entre componentes?
14. ¿Qué es un interceptor? Dame tres usos.
15. ¿Cómo harías el refresh token?
16. ¿Cómo funciona OnPush? ¿Cuándo se actualiza un componente OnPush?
17. ¿Para qué sirve trackBy / track?
18. ¿Lazy loading vs @defer?
19. Una pantalla va lenta: ¿qué haces, en orden?
20. ¿Has usado Java o Quarkus?

Checklist del día

• ☐ Decidida la respuesta de modalidad (híbrido CDMX) y el rango salarial.
• ☐ Frase de escolaridad ensayada.
• ☐ "Cuéntame de ti" dicho 3 veces en voz alta, cronometrado.
• ☐ E1 (buscador) tecleado de cero, sin mirar, en menos de 15 minutos.
• ☐ E2 (formulario con FormArray) tecleado de cero.
• ☐ Proyecto Angular 20 vacío listo (ng new practica --style=scss --ssr=false) por si piden compartir pantalla.
• ☐ Copilot y extensiones de IA apagadas si es prueba en vivo.
• ☐ Cámara, audio, luz. Agua cerca.
• ☐ 3 preguntas para ellos elegidas.

Cheat-sheet — lo que repasas 10 minutos antes