[MÚSICA] [MÚSICA] Hola a todos nuevamente. Aquí estamos comenzando el módulo dos. El objetivo de este módulo dos será conocer diferentes técnicas para hacer comunicar nuestros componentes. Empezaremos por disparar eventos, ¿sí? Desencadenar eventos entre componentes hijos hacia componentes padres para que los componentes padres capturen dichos eventos. Vamos a hacerlo en el contexto de detectar cuándo eligen un destino de viaje como preferido, ¿sí? Actualmente hay un botón que dice Read, leer. Vamos a cambiarlo por un botón de Ir como seleccionar de preferido. Entonces, como vamos a poder tener uno solo marcado como preferido entre todos los destinos que agregamos a nuestra lista de deseos, hay que disparar, desencadenar un evento hacia nuestro componente padre, que es donde está el listado de destinos, para que el listado desactive al otro destino que estaba como preferido antes, si es que estaba como preferido alguno, ¿no? Entonces, vamos a empezar primero para ser objetivo con la primer técnica de disparar eventos, emitir eventos entre componentes, y luego vamos a ir conociendo técnicas un poco más avanzadas. A medida que vamos a ir avanzando a lo largo de todos los módulos, vamos a ir aprendiendo algo de atajos sintácticos o syntax sugar como le dicen de Typescript. ¿Sí? Vamos a empezar justamente por uno de ellos que consiste en declarar en el constructor las variables públicas y ahorrarnos el seteo de dicha variable a la propiedad subyacente y las propiedades subyacentes. Esta línea de código que tenemos aquí hace exactamente lo mismo que lo que teníamos antes en el objeto, es exactamente lo mismo. Como podrán haber notado, yo estoy utilizando Visual Studio Code. Sumé esta herramienta para recomendárselas. Realmente genera instantáneamente un incremento en la productividad por todo el tema de intelligence y de las recomendaciones que nos va generando el ie. Bien. Dijimos que vamos a marcarlo como elegido. Entonces, vamos a tener una bandera, una variable bandera selected boolean, ¿sí? Que será privada, y vamos a tener dos métodos isselected. [AUDIO_EN_BLANCO] [AUDIO_EN_BLANCO] Primero, vamos a tener un método para identificar si está seleccionado o no y luego vamos a tener otro set selected para marcarlo como seleccionado, ¿sí? Para encapsular el acceso a dicha variable. Bien. Acabo de realizar un reemplazo de los tabs por los espacios, que yo activé para varios lenguajes y cada lenguaje tiene sus particularidades. Este id lo que nos está haciendo cuando nos sugiere que pongamos el tipo de dato separado del dos puntos, que pongamos un enter luego de la llave que cierra la clase. O sea, que la última línea sea una línea vacía en todos los archivos de Typescript, todo eso se llama linters. Linter es un lint, lint. ¿Sí? Son sugerencias de buenas prácticas para los lenguajes, para cada lenguaje de programación. Cada lenguaje de programación tiene las buenas prácticas que su comunidad define. Bien. Entonces, vamos a seleccionar. Acá you tenemos un destino de viaje. Nuestro modelo de dominio, el model, listo para poder hacerlo acá como seleccionado. Entonces, ahora lo que vamos a tener que hacer es ir al destino viaje component, que es la clase que wrapea a nuestro objeto de negocio. ¿Sí? La que wrapea de wraper, wrap de inglés, es que encapsula. ¿Sí? Bien. Entonces, nosotros lo que vamos a querer hacer es en este componente que nos lo elijan, ¿sí? Entonces, vamos a tocar el botón de Read, vamos a ponerle que sea un botón Ir, ¿sí? Y vamos a agregarle, como you vimos, algunos eventos. Clic. Vamos a hacer que vaya al método Ir, ¿sí? Y entonces, luego vamos a agregar que un indicativo, ¿sí? Un indicativo de si está seleccionado o no, ¿sí? Entonces, vamos a elegir, a mostrar que está puesto como preferido. Dentro de un span, pero esto solo lo vamos a mostrar, solo lo vamos a mostrar si está elegido como preferido el destino. Para eso, vamos a ir aprendiendo diferentes trucos. Ahora vamos a aprender cómo manipular directamente desde aquí, desde la vista cómo manejar la clase display, CSS, ¿sí? El display CSS puede tener distintos valores. Nosotros lo vamos a poner en un display vacío si es que está marcado como preferido, eso va a hacer que se muestre. Y vamos a poner un display none si no está seleccionado como preferido. Entonces, aquí el código que tenemos que escribir es Typescript, ¿sí? Destino.isselected. Si esto es verdadero, entonces no le asignamos nada a display. Y si es falso, le asignamos el valor none, ¿sí? Bien. De esta manera, you tenemos que crear en nuestra vista. Este destino isselected you está creado, es lo que vemos en el modelo de dominio, pero tenemos que crear esto en nuestra vista, en nuestro componente. Entonces, vamos a ir al código del controlador, del componente y vamos a hacer un método que se llame Ir, ¿sí? Entonces, hacemos Ir es un método que lo que va a hacer es, como you sabemos, para que no nos genere ningún tipo de efecto en el html, le ponemos return false, ¿sí? Nunca olvidarnos de eso. Y luego le ponemos la acción de desencadenamiento del evento. Para esto, imagínense que esto es como un clic, ¿sí? Vamos a ponerle clicked.emit, ¿sí? Acá estamos escribiendo cómo lo querríamos usar. this.clicked.emit lo que estamos diciendo es, bueno, tenemos que tener algún atributo en nuestro objeto que nos permite disparar eventos, que vamos a llamar clicked. Y queremos emitir un evento, ¿sí? Y en ese evento lo que queremos emitir es darle a conocer a nuestro componente padre qué destino fue el clickeado, que es el destino que you tenemos aquí. Entonces, esto es como intuitivamente uno querría usarlo, ¿no? Cuando me sucede la acción Ir, que es porque me tocaron el botón en la vista, ¿sí? Este botón que dice Ir, se dispara esta función y yo emito un evento a mi componente padre. Bien. ¿Cómo tenemos que declarar esta propiedad para que esto funcione? Vamos a declarar la propiedad clicked que va a ser de tipo event emitter, ¿sí? Como ven, aquí you me lo sugiere, ¿sí? Hay varias sugerencias. Entonces, la que tenemos que elegir es Angular core, ¿sí? Event emitter de Angular core es el que vamos a usar. Esto es un generic. Opcionalmente es de un generic, pero conviene ponerle para que nuestro código esté más tipado. you que estemos usando Typescript conviene ponerle el tipo en el generic, ¿sí? Bien. Pero esto solo no funcionaría. Tenemos que darle una directiva a través de una notation como hacemos con los input también que son los tipos de datos, las variables, atributos de nuestro objeto que nosotros exponemos a nuestro componente padre para que el componente padre nos dé valores de entrada. En este caso, estamos haciendo un valor de salida, ¿sí? Entonces, para eso le tenemos que poner output. Output, muy bien. Output también lo tenemos que importar, ¿sí? Angular core, como nos sugiere bien aquí el intelligence de Visual Studio Code, ¿sí? Que es 100% open source gratuito. Bien. Entonces, aquí estamos vamos declarando la variable pero no la estamos inicializando, entonces la vamos a inicializar en el constructor this.clicker igual new event emitter. perfecto. De esta manera you declaramos, you le cargamos un objeto a esta propiedad, sí. Y esta propiedad you está lista para ser usada, no tenemos que agregar nada más. Entonces ahora para usarla y terminar de cerrar este ciclo, lo que tenemos que hacer es ir al listado sí. En el listado, en el html nosotros lo que tenemos es la invocación al componente hijo con un ngfor. Vamos a escribir esto un poco más entendible porque sino se nos va a hacer muy ancho. Bien. Vamos a agregar una propiedad más, por eso les dimos enter para que no se nos vaya en ancho. Al igual que tenemos los clic de los botones como aquí que este lo estamos haciendo sobre un button que es algo que you Angular you soporta de fábrica digamos porque son los controles html básicos, aquí vamos a agregar el nuestro que acabamos de generar, clicked es el que generamos aquí, sí. Este output. Lo invocamos de igual manera que sobre los objetos, sobre los eventos de tipo output de lo que you viene de fábrica de html y Angular. Entonces bueno, ¿qué hacemos cuando nos tocan clicked? Cuando nos tocan clicked vamos a invocar a una función elegido. ¿Elegido qué, qué dato? Bien, elegido este destino porque sabemos que este destino es el que se le pasó a destino viaje, así que yo podría poner así, que es exactamente lo mismo que poner lo siguiente, event. Cuando nosotros emitimos el destino, estamos diciendo que nuestro emitidor de eventos es de destino viajes. Entonces cuando lo emitimos le tenemos que pasar un destino viajes, sí. Entonces, estamos pasando el this.destino. Entonces esto es equivalente a usar de. Porque este destino es el que va a estarlo de acá, cuando se emite el evento me pasan este destino, es el mismo, sí, Pero bueno, para otros casos que quizás el objeto que nos emite el evento no es justamente el mismo que tenemos aquí sino que es algo distinto, Para eso nos sirve este shorthand, este atajo event. Esto significa pasemos como argumento exactamente el mismo objeto que está llegándole a través del event emitter. Entonces ahora tenemos que ir al código detrás y tenemos que crear elegido, elegido, muy bien. Aquí tenemos un destino, de del tipo destino viajes. Bien. Y aquí lo que vamos a hacer es marcarlo como seleccionado y vamos a desmarcar como seleccionados a todos los demás. Entonces vamos a hacer un this destinos.foreach y por cada destino lo que vamos a hacer es x.setselected, y aquí vamos a pasarle false. No le definimos un argumento, nos está diciendo así que le tenemos que recibir is, vamos a ponerle s:boolean, así lo hacemos parametrizable. Y luego por último vamos a marcar como elegido al que nos eligieron. Setselected true. De esta manera disparamos el evento en el destino viaje component de elegido, lo capturamos aquí en el html y cuando capturamos ese evento llamamos a la función elegido y en esa función elegido desmarcamos como elegidos a todos los demás y marcamos como elegido al nuestro. Entonces vamos a servir la aplicación, y a probarla. [AUDIO_EN_BLANCO] [AUDIO_EN_BLANCO] Bien. Vamos a ver Barcelona. Muy bien. Ir marcado como preferido. Barcelona 2. Guardar. Me lo agrega ir, me lo marca como preferido, ¿ven? Bien, de esta manera terminamos este primer video tutorial de la primera lección del módulo 2. Nos vemos en el siguiente video de esta primera lección. > [MÚSICA] [MÚSICA]
