Queremos agregar elementos a nuestra lista. Con Angular podemos hacer esto facilmente, y ver el elemento agregado inmediatamente. Haremos esto desd el componente inputComponent que creamos antes. Vamos a cambiarlo, así que cuando se presione Enter o cuando se de click en el botón, el valor del input se volverá el título de un nuevo elemeto. Y el nuevo elemento será agregado a la lista.
Pero nosotros no queremos que el componente todo-input sea el responsable de enviar el nuevo elemento a la lista. Queremos que este tenga la mínima responsabilidad, y delegue la acción a su componente padre. Una de las ventajas de esta aproximación es que el componente será reusable, y puede ser adjunto a diferentes acciones en diferentes situaciones.
Por ejemplo, en nuestro caso, seremos capaces de usar el inputComponent dentro de itemComponent. Entonces vamos a tener una caja de texto por cada elemento y vamos a poder editar el título del elemento. En este caso, presionando la tecla Enter o el botón Guardar tendrá un efecto diferente.
Entonces lo que queremos actualmente es emitir un evento desde el componente todo-input cuandl el título ha sido cambiado. ¡Con Angular podemos fácilmente emitir eventos desde nuestros componentes!
Dentro de la clase inputComponent añadiremos la siguiente línea, la cual define un output para el componente.
@Output() submit: EventEmitter<string> = new EventEmitter();La propiedad output es llamada submit Asegúrate de que Output and EventEmitter estén agregados en las sentencias de import en las primeras líneas del archivo:
import { Component, OnInit, Output, EventEmitter } from '@angular/core';Ahora, cuando llamemos this.submit.emit() un evento será emitido al componente padre. Vamos a llamarlo en el método changeTitle:
changeTitle(newTitle: string): void {
this.submit.emit(newTitle);
}Delegamos todo al componente padre - incluso actualmente cambiar el título del elemento si es necesitado. (El nombre del método puede parecer irrelevante ahora. Si quieres puedes cambiarlo a algo mas apropiado como submitValue. Recuerda cambiarlo en la plantilla también).
Pasamos newtitle cundo emitimos el evento. Lo que sea que pasemos en emit() estará disponible por el padre como $event.
Nada mas necesita ser cambiado en el componente todo-input. Los eventos emitidos por keyup.enter y click seguirán en el mismo método, pero el método en si ha cambiado.
Ahora necesitamos atrapar el evento en el componente padre y añadirle lógica a él. Ve al componente app-root y enlaza el evento submit en el componente <todo-input>:
<todo-input (submit)="addItem($event)"></todo-input>Ahora todo lo que falta implmenentar es el método addItem, el cual recive una cadena y la añade a la lista:
addItem(title: string): void {
this.todoList.push({ title });
}¡Pruébalo!