streakode

Angular 22

Ejercicios de Angular para practicar cada día

Angular moderno gira alrededor de los signals y de las plantillas con control de flujo integrado. Los ejercicios son fragmentos cortos de componente y plantilla para que los leas, completes o arregles.

Prueba cuatro ejercicios sin cuentaCrear cuenta gratis

Así son los ejercicios de Angular

Estos son 5 del nivel 1. Piensa la respuesta antes de abrirla: la explicación dice por qué las demás opciones fallan.

  1. Ejemplo 1 · Signals

    ¿Qué imprime este código?

    const count = signal(0);
count.set(5);
console.log(count());
    • A5
    • B0
    • CSignal { value: 5 }
    • Dundefined
    Ver la respuesta

    Respuesta: A. Un signal se lee llamándolo como función. set() reemplaza el valor, así que count() devuelve 5.

  2. Ejemplo 2 · Control de flujo

    Si items() es un array vacío, ¿qué se muestra?

    @for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <li>Sin resultados</li>
}
    • ASin resultados
    • BNada
    • CUn <li> vacío
    • DUn error: @empty solo vale con @if
    Ver la respuesta

    Respuesta: A. El bloque @empty de un @for se muestra cuando la colección no tiene elementos. Evita añadir un @if aparte solo para ese caso.

  3. Ejemplo 3 · Componentes

    ¿Cómo escucha el componente padre el evento closed?

    @Component({ selector: 'app-dialog', template: `...` })
export class Dialog {
  closed = output<void>();

  close() {
    this.closed.emit();
  }
}
    • A<app-dialog (closed)="onClosed()" />
    • B<app-dialog [closed]="onClosed()" />
    • C<app-dialog closed="onClosed()" />
    • D<app-dialog (closed.emit)="onClosed()" />
    Ver la respuesta

    Respuesta: A. output() declara un evento del componente. El padre lo escucha con paréntesis, igual que un click. Los corchetes son para las entradas.

  4. Ejemplo 4 · Eventos

    ¿Cuándo se llama a search()?

    <input (keyup.enter)="search()" />
    • AAl soltar la tecla Enter dentro del input
    • BCon cada tecla que se pulsa
    • CAl perder el foco
    • DNunca: keyup.enter no existe
    Ver la respuesta

    Respuesta: A. Los paréntesis escuchan un evento. Angular admite filtros de tecla como keyup.enter o keydown.escape, así que no hace falta comprobar event.key a mano.

  5. Ejemplo 5 · Plantillas

    Si price() vale 5, ¿qué muestra la plantilla?

    <p>Total: {{ price() * 2 }}</p>
    • ATotal: 10
    • BTotal: {{ price() * 2 }}
    • CTotal: 5 * 2
    • DNada: no se puede operar en la plantilla
    Ver la respuesta

    Respuesta: A. La interpolación {{ }} evalúa una expresión y muestra su resultado como texto. Admite operaciones sencillas, aunque la lógica compleja conviene sacarla a un computed.

Qué vas a practicar

La ruta de Angular tiene 60 ejercicios repartidos en 16 temas, con cuatro formatos: predecir la salida, completar un hueco, encontrar el fallo y ordenar líneas. Signals, control de flujo, componentes, eventos y router: la parte del framework que más usarás en el día a día.

  • Signals
  • Control de flujo
  • Componentes
  • Eventos
  • Plantillas
  • Router
  • Enlaces
  • Inyección de dependencias
  • Pipes
  • RxJS
  • Carga diferida
  • Configuración
  • Consultas
  • Detección de cambios
  • Enlace bidireccional
  • Servicios

Un minuto al día, sin perder la racha

Cada día haces una sesión de cinco ejercicios. Lo que fallas vuelve justo cuando estás a punto de olvidarlo, cada acierto suma XP en la ruta y puedes compararte con tus amigos en las ligas semanales. Funciona en el navegador, también en el móvil, y es gratis.

Empezar con Angular

Otras rutas