Hola nuevamente, estamos aquà en el segundo video de la Lección 1 del Módulo 2. Vamos a ver ahora las diferentes directivas que nos sirven para personalizar nuestros componentes, directivas de "templates". Vamos a aprender a hacer mejores "templates". Para eso, vamos a agregar una información más en nuestro modelo de dominio llamado "DestinoViaje", que van a ser los servicios, las comodidades que provee nuestro destino. Vamos a hacer algo ficticio. "Servicios", vamos a llamarlo que sea un "array de strings". Y vamos a inicializarlo por defecto, vamos a hacerlo "public". Vamos a inicializarlo por defecto en el constructor que sea "this.servicios=". Vamos a ponerle "pileta" y "desayuno" como "strings", [ 'pileta', 'desayuno' ] como si fuesen servicios del destino donde nos dirigirÃamos. Esto, obviamente, es algo ficticio que cuando seleccionarÃamos, en verdad, del formulario, del nombre del lugar a donde quisiésemos ir, harÃamos un "autocomplete", que de a poco algo de esto vamos a ir haciendo, un autocompletado en donde uno elige un destino conocido y ese destino tuviese ya estos servicios. Ahora lo vamos a hacer aquà constante. Entonces, aquà ya tenemos nuestro modelo dominio que tiene nuevos servicios del destino. Lo próximo que vamos a hacer es poner esto en la vista del componente de "DestinoViajes". Entonces, aquà lo que vamos a hacer es poner un tÃtulo para la parte de servicios, que va a ser aquà donde tenemos este signo "p", vamos a ponerle aquà "servicios" y, luego de esto, vamos a poner una lista no numerada, donde vamos a poner diferentes "list items", que van a ser los servicios de nuestro destino. Para esto vamos a hacer un "ngFor" y aquà vamos a poner "let s of destino.servicios" y vamos a iterar a través de dicho servicio. Aquà ya estamos viendo una directiva que ya conocemos que es el "ngFor". Esta es una de las directivas de Angular. Vamos, luego, a poner dentro del "li" un contenido, vamos a poner el contenido dentro de un "span". El contenido, en sÃ, podrÃa ser el nombre del servicio. Si nosotros ya ejecutamos esto, directamente, vemos que los servicios aparecen aquà debajo. Pero vamos a conocer otra directiva, vamos a conocer la directiva "Switch". La directiva "Switch", vamos a hacer, a expandirla dentro del span. Para eso, tipeamos la directiva "ngSwitch". Cuando uno trabaja con el "ngSwitch", la lógica es la siguiente: uno pone una variable o expresión a igualar en el "ngSwitch", que esta expresión puede tomar distintos valores. Entonces, uno empieza a poner las diferentes reglas que "matchean", que coinciden con esa condición. Entonces, adentro vamos a poner un tag "i" y vamos a poner una directiva hija, o hermana, o parte, mejor dicho, de la directiva "ngSwitch", que sea "*ngSwitchCase=", y vamos a poner el valor "desayuno", que es un "string". Acuérdense que acá va una expresión de "typeScript". Nosotros acá vamos a poner una expresión constante, pero podrÃa ser una llamada, una función que levante este valor desde algún otro lugar. Acá, estamos poniendo un valor constante "desayuno". Entonces, si "s" es un "string" que es igual a "desayuno", se va a mostrar este tag "i" y adentro mostramos "s". Vamos a ver. Ponemos de vuelta "Barcelona". FÃjense que en donde pusimos, cuando se cumplió el "ngSwitchCase" de "desayuno", salió en "i", en itálicas, el "string" "desayuno", y salió dos veces porque luego tenemos el de "s" mostrándose siempre. Ahora vamos a hacer una directiva más que es en otro caso, porque aquà podrÃamos poner "ngSwitchCase" todas las veces que queramos, pero vamos a hacer otro que sea el "ngDefault", que el "ngDefault" no tiene ninguna igualación o nada, es simplemente invocar al "ngSwitchDefault". Vamos a ponerlo que, por defecto, para diferenciarlos, este "i", si tiene "desayuno", si se cumple, vamos a ponerle un color en rojo. Entonces, volvemos a poner "Barcelona" y, como se ve aquÃ, salió en itálica siempre, pero si es "pileta", entra por "ngSwitchDefault", que solamente escupe de retorno en la itálica de "s" y, si no, a su vez, itálicas con color rojo porque está retornando este "i" de acá arriba. De esta manera, conocemos el "ngFor", el "ngSwitch". Ahora vamos a esta parte del contenido de este "span", que tenemos un "If". Esto lo podemos hacer de otra manera. Básicamente, lo que queremos hacer es mostrar la cadena "PREFERIDO", si está seleccionado el destino o no, esta condición que está aquÃ. Entonces, lo que vamos a hacer es, en vez de jugar con el "display", vamos a hacer "ngIf", "DestinoSelected", esa es la expresión. Entonces, "If", si se cumple "DestinoSelected", entonces, mostramos "PREFERIDO". Tenemos "Barcelona" y "Barcelona 2", ninguno está preferido. Ahora selecciono este o este, y esto funciona gracias al "ngIf". Esta es otra de las directivas que tenemos. Obviamente, acá, uno puede poner un "not" adelante, puede invocar a cualquier función. Lo que está siendo evaluado aquà son expresiones de "TypeScript", o sea, podemos invocar a las funciones que estén en el "component.ts", cualquier expresión de "TypeScript". Vamos a agregar algo más. Es una muy poco usada dentro de las directivas principales, "If", "Switch", "For", que estuvimos viendo hasta ahora, pero es útil saberlo porque para algunos casos nos es útil. En general, cuando tenemos un código que nos conflictúa con alguna de las sintaxis de las "templates". Nosotros, en template, usamos "*ngIf", usamos algunas sintaxis medias particulares y, a veces, si nosotros estamos rendereando contenido, aquà estamos rendereando un contenido que viene de la aplicación. Hay algunos casos borde, donde los que estamos rendereando nos puede conflictuar con la sintaxis de los templates, nos sirve la directiva "ngNonBindable". Esto indica que todo lo que esté adentro de este árbol que estamos abriendo aquà dentro de HTML, todo el HTML que este acá adentro no va a ser "bindeable" a Angular. Entonces, vamos a probar esto: "Barcelona", lo agregamos, "ir", sale "PREFERIDO". Vamos a probarlo si funciona o no, agregando algo que, en general, evaluarÃa a Angular. Una manera fácil de hacerlo es agregando "llaves llaves". Esto, en código Angular, ¿qué significa? "PREFERIDO", o sea, rendearÃamos el contenido que tenga la variable "PREFERIDO", rendeariémoslo en el HTML. Pero, como está dentro de un "ngNonBindable", estas "llaves llaves" no van a ser reemplazadas. Entonces, si ahora ponemos "Barcelona", y ponemos "ir", ven que renderea el "llaves llaves". Si yo no le saco el "NonBindable", esto me va a tirar un error, me va a decir: "Variable 'PREFERIDO' no existe". Vamos a ver otras cosas que solemos querer personalizar en nuestras vistas. Vamos a poner aquà arriba, donde ponemos este texto de acá arriba, vamos a poner una variable que se llame "Posición". Vamos a hacer la variable "Posición", que sea una variable de tipo "input" también, en nuestro objeto de componentes, y vamos a mostrar la posición aquà arriba: posición uno, dos. Eso, ¿de dónde lo sacamos? del listado. Entonces, aquÃ, vamos a tener que poner una nueva variable, "position", y ahà vamos ya vamos a poner el valor "1". Vamos a ver esto si ejecuta correctamente, ¿ven que siempre sale "1"? Nosotros lo que le queremos poner ahora, para conocer un poco más una de nuestras directivas, la directiva "ngFor", es poner el Ãndice, el Ãndice que ocupa dentro de esta iteración de "For". Para eso, la técnica que se usa es definir una nueva variable auxiliar, podemos poner el nombre que queremos, igual a "index". "Index" es una variable que, dentro de la "ngFor", se reemplaza automáticamente y se asigna "i" con el número de iteración dentro de ese "For". Entonces, ahora, en vez de ponerle "1" aquÃ, vamos a usar la variable temporal que acabamos de crear, "i", variable de template. Vamos a actualizar esto y ven que empieza desde el cero en adelante. Aquà podemos ponerle "i+1", "1", "2", "3", etc. Por último, vamos a ver algo que a veces es útil, no es muy común, pero a veces es útil. Desde las vistas, queremos hacer que esta variable de entrada no se llame "position", sino que tenga un nombre "custom", por ejemplo, "Ãndice", Ãndex, "idx". Aquà lo que me dice el Visual Studio Code es que no es buena práctica renombrarla, pero a veces es necesario y por eso estamos viendo este feature de Angular. "Idx", vamos a invocarlo, o sea, el valor que se le asigna al objeto, a la variable "position", en la variable de entrada, a nivel de template, va a ser "Idx". Ahora refrescamos y vemos que todo funciona correctamente, como siempre. Con este video aumentamos un poco nuestros conocimientos de cómo manejar los templates, poner "If" en el lenguaje de marcado HTML, poner "SwitchCase", poner "For", usar el subÃndice, "NonBindable", parámetros custom, para poder ampliar los conocimientos y el potencial de manejo de nuestros "templates". Nos vemos en el próximo video.
