Angular 4: Binding de eventos
easy⏱ 5 mincourseangular
(evento)="handler()" conecta el DOM
Cualquier evento nativo del DOM — click, input, submit, keydown, mouseenter, y muchos más — puede vincularse con (nombreDeEvento)="expresión". La expresión generalmente llama a un método del componente, por ejemplo (click)="increment()". Angular agrega un listener de evento real por detrás y lo limpia automáticamente cuando el elemento se destruye.
<button (click)="increment()">+1</button>
<input (input)="onInput($event)" placeholder="Type here" />
$event: el evento nativo del navegador
Dentro de un binding de evento, la variable especial $event se refiere al objeto de evento nativo real que disparó el navegador — un KeyboardEvent, MouseEvent, SubmitEvent, etc. Para inputs de texto, ($event.target as HTMLInputElement).value lee lo que el usuario tipeó. Para un <form (submit)="onSubmit($event)">, llamar a $event.preventDefault() dentro de onSubmit detiene el envío por defecto del navegador que recarga toda la página — esencial para cualquier formulario manejado por Angular.
Construí QuickNote
Vinculá el evento (input) del input de texto a un método onDraftChange($event) que actualice un signal draft a partir de $event.target.value. Vinculá el evento (submit) del <form> a un método save($event) que llame a $event.preventDefault() y agregue el borrador a un signal notes.