Angular 22
Ejercicios de Angular sobre Eventos
5 ejercicios de Eventos en Angular. Piensa la respuesta antes de abrirla: la explicación dice por qué las demás opciones fallan.
1 · Elige la respuesta · nivel 1
¿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. Al soltar la tecla Enter dentro del input
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.
2 · Elige la respuesta · nivel 1
¿Qué sintaxis llama a save() al pulsar el botón?
- A<button (click)="save()">
- B<button [click]="save()">
- C<button onClick={save}>
- D<button {{ click }}="save()">
Ver la respuesta
Respuesta: A. <button (click)="save()">
Los eventos se escuchan con paréntesis: (click), (input), (submit). Los corchetes son para enlazar propiedades. onClick={...} es la sintaxis de React.
3 · Encuentra el fallo · nivel 1
Al pulsar el botón no pasa nada. ¿Qué línea tiene el fallo?
1@Component({2 selector: 'app-like',3 template: `<button (click)="like">Me gusta</button>`,4})5export class Like {6 likes = signal(0);7 like() { this.likes.update((n) => n + 1); }8}Ver la respuesta
El fallo está en la línea 3:
template: `<button (click)="like">Me gusta</button>`,En un enlace de evento, la expresión se ejecuta tal cual: like sin paréntesis solo nombra el método y no lo llama. Tiene que ser (click)="like()".
4 · Encuentra el fallo · nivel 1
El botón Salir debería llamar a logout() al pulsarlo, pero no funciona. ¿Qué línea tiene el fallo?
1<nav>2 <a routerLink="/perfil">Perfil</a>3 <button [click]="logout()">Salir</button>4</nav>Ver la respuesta
El fallo está en la línea 3:
<button [click]="logout()">Salir</button>Se arregla con<button (click)="logout()">Salir</button>.Los eventos se escuchan con paréntesis: (click). Con corchetes Angular intenta enlazar una propiedad llamada click, no escuchar el evento.
5 · Completa el hueco · nivel 1
Completa el botón para que llame a like() al pulsarlo.
<button ___="like()">Me gusta</button>- (click)
- [click]
- onClick
- click
Ver la respuesta
Respuesta: (click)
<button (click)="like()">Me gusta</button>Los eventos van entre paréntesis: (click). Los corchetes son para propiedades.