Transcript for:
Curso de Angular desde Cero con Angular 17

bienvenidos al curso de angular desde cero Y sí sí sí con angular 17 incluido recién salido hace una semana La verdad que estoy muy emocionado de poder compartirles todos mis conocimientos acerca de angular angular es mi framework y mi tecnología de base es la que más manejo Por lo cual Estoy muy emocionado de haber llegado a poder hacer este extenso video que incluye las últimas versiones incluye proyectos y la verdad que está muy interactivo para que ustedes aprendan De punta a punta Este framework es un framework muy utilizado por empresas de seguros bancos ya que es muy muy robusto y poco flexible A diferencia de por ejemplo la librería famosa react así que sin más preámbulos vamos a por este maravilloso curso y nos vemos en la primera sección llegó el curso que tanto tanto pidieron no Sergio no hay cursos de angular gratis en YouTube no consigo cursos de angular por ningún lado bla bla bla bla bla solo react react react y nunca angular perfecto Ahora sí angular desde cero gratis en YouTube por serg code para comenzar este curso abrimos una ventana de Google Chrome y Aquí vamos a entrar a miist para poder ver las instalaciones necesarias para este curso ponemos gist.github.com serg code como está acá en la barra de navegación hacemos enter y podemos ver acá que hay varios zist en este caso hay cuatro vamos a buscar el que dice angular sí Y dice instalaciones necesarios para el curso de angular le hacemos clic y se va a abrir este gist que tiene todos los links que son las instalaciones necesarias para este curso pero también tenemos las documentaciones oficiales y mi canal de YouTube Así que vamos a ir uno por uno primero principal Tenemos que tener Google Chrome como navegador en el caso que lo hayas abierto con otro navegador te recomiendo que instales este navegador de Google que realmente es muy bueno y vamos a poder utilizar la las dep Tools para poder ver cómo se conforma la aplicación de angular sí lo podas descargar de acá yo como podrás ver ya lo tengo descargado después vamos a descargar el visual Studio code visual Studio code es el editor de código más utilizado por toda la comunidad de desarrolladores frontend Y en este caso está disponible para Windows para Linux y para Mac en este caso yo tengo Windows descargaré de aquí esperamos unos segundos descargamos acá en el escritorio y acá como podemos ver tenemos el instalador de visual Studio code instalamos este editor de código que va a ser la herramienta con la cual vamos a estar editando nuestro código de angular justamente si lo instalamos acá podos aceptar el acuerdo siguiente siguiente instalar y perfecto en este caso no lo vamos a ejecutar vamos a borrar el instalador y vamos a volver al gist seguimos con git git ya ha hecho un curso en este mismo canal de YouTube el cual es una herramienta si para manejar versiones de nuestro código nosotros vamos a poder utilizar esta herramienta no solamente para manejar las versiones de código como les dije anteriormente sino también para poder subir nuestro código a un repositorio externo y de esa forma mantener eh el código en un en un servidor y poder bajarlo en cualquier otra computadora para poder continuar y además también nos da la posibilidad de trabajar de forma colaborativa con otros desarrolladores entonces Esta es una herramienta fundamental acá en la página te va a autodetectar qué qué sistema operativo tenés pones download for Windows en este caso y tocas click here to download lo bajas en el escritorio Acá está ejecutas la instalación y acá le das siguiente siguiente siguiente yo ya lo tengo instalado y configurado Por lo cual no voy a hacer uso en este caso de la instalación pero sí te recomiendo que vos lo hagas por si tenés una versión eh antigua sí volvemos al gist Y tenemos como cuarta instalación necesaria node el cual es un entorno de desarrollo basado en javascript en el cual vamos a poder utilizar la interfaz la terminal para poder utilizar angular cli que es la interfaz propia de angular y además obviamente instalar paquetes y un montón de cosas más que ya hemos visto en otros cursos pero acá lo vamos a volver a ver hay que instalar la versión lts que es la última versión de forma estable Porque si bien hay una más nueva como pueden ver acá la 21.1.0 que es la última La que se recomienda siempre es la que dice lts que es la versión estable última así que que hacemos clic aquí descargamos el escritorio la instalamos si yo en este caso ya la tengo instalada Por lo cual no la voy a instalar pero ustedes danle denle siguiente siguiente siguiente y le instalan una vez instalado vamos a borrar el instalador vamos a volver a ir acá y vamos a ver lo que es typescript en este caso no hace falta instalarlo sino más bien Es para saber que se utiliza en angular typescript y acá tenemos lo que es la instalación si pero también tenemos la ent ación Por lo cual más que todo es para que ustedes puedan ver la documentación de typescript que aquí está Sí pero en realidad no hace falta hacer ningún tipo de instalación porque angular propio ya viene con typescript de forma nativa Sí así que esto lo salteamos vamos a postman postman claramente Es una herramienta importantísima Es un cliente para poder consumir servicios http los cuales Por ejemplo si nosotros tenemos una Api de terceros o un backen eh podemos consumirlo con este cliente antes de armar la a la pantalla y ustedes me dirán Por qué para qué servirá esto es lo siguiente si nosotros queremos armar una pantalla nosos tenemos que saber qué es la información que nos provee el backend o cuál es la información que nos provee la Api de terceros Por ejemplo si tenemos una Api de Pokémon y y nosotros no sabemos Qué información de los Pokémon nos trae con el postman podemos hacer una llamada sin tener la página web armada y que nos traig por ejemplo eh Cuáles son los campos que tiene a lo mejor no dice nombre descripción tipo etcétera etcétera Ah listo puedo hacer una tarjetita en la cual tenga nombre descripción etcétera entonces es muy importante utilizar postman para poder prever Qué información nos ofrece El baken antes de eh hacer la la la web Sí me parece la forma más inteligente por lo cual vamos a necesitar esta herramienta simplemente hagan clic en el instalador aquí y se le va a estar instalando en su computadora yo ya lo tengo instalado Por lo cual vamos a saltear este paso en esta computadora pero ustedes háganlo después tenemos los angular snippets s que esto es muy importante que eh básicamente los sniped son como atajos de teclado para que se armen estructuras esto es super importante lo tienen que tener instalado Sí o sí esto ya se lo voy a mostrar Cómo instalarlo desde el visual Studio code si nosotros vamos acá al visual Studio code que ya les voy a dar una introducción un poquito más grande para los que no lo conozcan aunque se supone que si estás haciendo el curso ya tenés que saber html css javascript y typescript como mínimo Por lo cual no hagas este curso sin sin saber esos cuatro cursos los cuatro cursos están gratis en mi canal de YouTube que es html ccs javascript y typescript desde cero los cuatro cursos están gratis Así que hacelos antes de hacer este curso en los cuatro vimos Cómo se utiliza visual Studio code para poder hacer una instalación de de un plugin como el que vimos vamos acá a la parte de extensiones y Aquí vamos a poner este que yo les comentaba que se llama angular snippets eh versión 16 podemos tocar acá y que directamente nos abra el vis Studio code como podemos ver a acá nos llevó a la snippet o podemos escribir acá angular snippets Sí y nos va a buscar como ven acá el de John papa hacemos instalación y ahí nos va a estar instalando los atajos de angular de John papa que es eh digamos un proveedor de todo este tipo de información que es realmente muy muy bueno y no va a ser el único que instalemos de él también vamos a instalar otro más vamos a poner acá y podemos ver acá que está angular Language service propio de angular io si podemos ver acá y también lo vamos a estar instalando que nos va a dar templates o sea como plantillas de eh uso de angular la verdad está muy bueno también lo vamos a instalar Y tenemos angular essentials que también es de John papa como podemos ver también lo vamos a instalar sí tenemos instalado estos tres que nos van a ayudar un montón ustedes me dirán qué para qué te ayuda Esto bueno nos ayuda muchísimo no solamente cuando estamos escribiendo nos va a dar ayuda de atajos de teclado sino que nos va a ir sugiriendo visual Studio code en base a las últimas versiones de angular para que nosotros podamos eh ir escribiendo y en tiempo real nos vaya sugiriendo un montón de información por supuesto toda la información que nos sugiere Yo la voy a estar eh explicando para que ustedes no se pierdan Sí vamos a cerrar un poquito esto porque ya está todo instalado y vamos a ir acá a bootstrap bootstrap tampoco lo vamos a instalar directamente pero quiero que entiendan de qué sirve bootstrap es un toolkit o una herramienta para poder utilizar en el Front en este caso angular para poder tener componentes ya hechos si nosotros queremos utilizar un un botón en vez de de poner un botón estático de html y tener que configurarle eh Todos los estilos y todo eso directamente boostrap nos va a a ofrecer componentes botones formularios barras de navegación ya con con todo construido para poder ir mucho más rápido y prestarle más atención al framework en Sí pues yo lo que quiero dar es que ustedes sepan la tecnología no quiero estar estar 2 horas viendo cómo estilizar un botón si yo les puedo ofrecer a través de boostrap una una explicación fácil e ir rápido para poder realmente mostrarles Cómo funciona la tecnología y después ustedes verán qué componentes usan cómo los estilizan porque también tienen un curso completo sss para poder darle los estilos que ustedes quieran a las páginas en este caso Vamos a darle un poquito menos de de valor agregado a la parte del estilo vamos a hacer por ahí páginas un poquito más planas y le vamos a dar muchísimo más valor a la parte de la lógica de cómo se cómo se codea y cómo se programa en angular para que se lleven la información de la tecnología y después por supuesto ustedes pueden explotarla mucho más adelante eh con todas las herramientas que van a tener con este curso y el css para poder hacer páginas web mucho más lindas Entonces como les comentaba eh boam nos va a dar esa estructura de estilos ya prearmada Para aprovechar al máximo el tiempo esto lo vamos a ver un poquito más adelante donde ya tengamos armado el proyecto vamos a ver cómo se incorpora boam no hay que instalar nada en este momento lo mismo con angular material angular material es lo mismo también son componentes diseñados propios de angular si vamos acá un poquito más adentro podemos ver que tenemos inputs con auto complete batch botones eh tarjetas checkboxes chips etcétera etcétera etcétera todo prearmado para que nosotros no tengamos que estar ahí luchando a ver cómo se ve directamente agarramos angular material lo ponemos y ya se ve de forma correcta por supuesto después uno después la puede estilizar como les comenté antes esto se puede estilizar muchísimo pero eso ya es parte de sentarse y darle una customización a tu página web que claramente en este curso vamos a ver un poquito por arriba Porque la idea es que ustedes se vayan con el conocimiento del framework que sepan programar en angular después la parte estética por supuesto dependiendo de el negocio eh que ustedes planteen ya sea para ustedes para un cliente o para una empresa verán Qué colores son los del branding o los de la empresa para poder eh hacer un producto relacionado con eh la estética que ustedes neen pero en este caso nos va a servir muchísimo poder ir rápido en la parte de armado de componentes y estética para poder darle mucha más atención a la parte de la lógica del entendimiento de la tecnología angular que realmente es muy buena muy sólida muy robusta y me parece mejor poner el foco ahí así que sepan también que está ular material esto también al igual que bootstrap lo vamos a agregar una vez que ya tengamos iniciado un proyecto para poder aprovecharnos de estas herramientas sí Y por último angular dep Tools vamos a también agregarlo más adelante que es un plugin de propio de de Chrome en el cual se agrega haciéndole clic a este a este botón y te va a agregar una funcionalidad dentro del inspector de código que se abre haciendo f12 acá donde va a decir angular dentro de Esto va a decir angular dep Tools y vamos a poder ver si nuestra aplicación es angular estamos corriendo de forma local Cómo se forman los componentes en esa aplicación entonces Eh Esto va a ser muy importante como ven es para desarrolladores y acá tienen un poquito más la descripción por si quieren chusmear un poquito pero esto también lo vamos a ver un poquito más adelante en el curso después tenemos las documentaciones oficiales tenemos angular que claramente es una documentación muy completa pero está en inglés esta diferencia de react si bien tiene mucha mucha comunidad la documentación oficial actualizada está en inglés tenemos las novedades de angular que esta como pueden ver es un un github mío donde yo puse todas las novedades de angular 16 que ha salido hace poco Aunque está por salir angular 17 Es más no sé si este curso ya sale con angular 17 para ver todas las novedades que trae no en este caso están todas las novedades de angular 16 que son muy interesantes después tenemos angular signals que es un un cambio enorme que tuvo angular 16 en el cual digamos todos los que son observables y todas las que son variables que necesitamos estar escuchando todo el tiempo vamos a utilizar signals que es eh una herramienta que en realidad originalmente sale de solid js que es básicamente hacer s s super reactiva la la pantalla que cualquier modificación que que haga el usuario automáticamente todos los cambios se hagan de forma automática Realmente está muy muy bueno y también lo vamos a ver un poquito más adelante en el curso después tenemos la documentación typescript sí que estaba también un poquito repetida por ahí con el de arriba En donde podemos ver toda la información eh de cómo utilizar typescript que como les comentaba antes angular está basado en Ty typescript Por lo cual necesitas saber typescript para poder hacer este curso Por lo cual si no sabes typescript anda a mi curso que te lo dejo acá arriba de typescript desde cero que está en mi canal de YouTube de forma gratuita entonces tenés html gratis css gratis javascript gratis y typescript gratis en mi canal tenés que verlos antes de hacer este curso y por último javascript en español de de mozila donde podes ver un montón de conceptos si no te acordas Por ejemplo si tenés que hacer Uh yo tengo que agarrar este array que me viene y tengo que mapear cómo se mapea listo buscas acá Cómo se mapea no lo voy a buscar yo acá porque debe estar por ahí capaz que si ponemos acá map aparece a ver perfecto acá aparece como mapear eh impresionante mira con este buscador pones lo que no te acordas Uy Cómo se hace para hacer una división pones split Bueno si pones split acá no sale Pero no importa vos después lo buscarás y y cualquier duda que tengas de javascript o de typescript podés con estos dos enlaces encontrar la información y por último el canal de serg code porque a lo mejor este video no lo estás viendo desde mi canal alguien lo bajó y lo subí en otro lado no no no no no anda a mi canal porque obviamente me beneficia tu visita y por supuesto acá podes ver otros cursos más venidos al curso como puedes ver Acá tengo videos de todo tipo empezando de html ccs javascript que son los que tenés que ver si querés ver el re también está Pero por supuesto el otro obligatorio es typescript sí Entonces estos cuatro primero los pues ver y también tenés el de gid y github que es la manipulación de manejo de versiones Y cómo subir a repositorios externos Por lo cual en este curso lo vamos a ver un poquito por encima si querés más información tenés que ver este curso de gid github que sí o sí te lo piden en cualquier trabajo para poder trabajar de forma colaborativa con tus compañeros Sí y después hay otras entrevistas y participaciones mías en evento que también puede ver o no pero bueno básicamente están ahí también para verlas ahí en mi canal también podés unirte y podés apoyarme de forma eh económica si te sirve este este curso puedes ver que ya tengo 19,000 suscriptores me pone muy contento porque cada vez que hago un curso esto este este número cuando lo publico Ya está mucho más alto Así que en este momento tengo 19,000 suscriptores veremos cuántos tengo cuando salga este curso Ojalá que muchos más y ojalá que a vos te sirva mucho de esta información si queres unirte a la comunidad eh ahí también puedes aportar económicamente para que este canal crezca y crezca por supuesto si se un un montón de gente yo voy a tener más tiempo disponible para poder hacer este tipo de curso gratis Sí y bueno Me parece que esto ha sido más que suficiente para la sección uno que es la sección de instalaciones Así que vamos a la siguiente sección en esta sección vamos a ver un poquito de teoría sé que no los tengo tan acostumbrados a una sección teórica al comienzo en la mayoría de los otros cursos arranqué directamente con la práctica pero angular Tiene ciertas características necesitamos entender previamente a empezar a codear ya que es un un concepto un poco abstracto el de framework y necesito que ustedes lo entiendan y además Cómo se componen las capas de cómo funciona esta tecnología Así que vamos de poquito vamos a iniciar Qué es angular angular es un framework de diseño de aplicaciones y plataforma de desarrollo para crear aplicaciones de una sola página eficientes y sofisticadas esto es muy importante que ustedes entiendan es un framework está basado en typescript y typescript está basado en javascript sirve para hacer páginas webs de una sola página ya vamos a ver un poquito este concepto qué requiere Y esto es muy importante y ya lo he dicho en la sección anterior saber html ccs javascript y typescript que hay los cuatro las cuatro tecnologías tienen videos gratuitos en mi canal html desde cero ccs desde cero javascript desde cero y tspt desde cero hagan los cursitos antes de hacer este si no va a entender un bomo y además requiere como decíamos tener instalado eh node Y la terminal de git sí bien acá hay otro concepto muy importante que es el patrón modelo vista eh controlador que es un patrón de diseño de software ampliamente utilizado en la industria de desarrollo de aplicaciones entonces modelo vista controlador recuerden su objetivo principal es separar las preocupaciones dentro de una aplicación en tres componentes distintos para mejorar la modularidad la mantenibilidad y la escalabilidad de código el modelo vista controlador recuérdenlo porque es muy importante esto lo vamos a ver muy claramente en angular comoo se separa Dónde hacemos el modelo Dónde está el modelo de negocio dónde se hace la vista si la parte visual de que con el cual uno interactúa y el controlador si donde se controla toda la actividad que está en la vista para que haya un ID vuelta con el modelo eh de negocio sí esto es muy importante modelo vista controlador bien empecemos con modelo modelo representa principalmente los datos y la lógica negocio de la aplicación los modelos se definen Generalmente como clases typescript y pueden incluir propiedades y métodos que describen Cómo se acceden y se manipulan los datos como les comentaba antes la parte del modelo va a estar en la parte de typescript sí que es donde vamos a volcar toda la información de el modelo de negocio por ejemplo si estás haciendo una aplicación para una empresa de seguro o un banco Ahí va a tener la lógica negocio del banco por ejemplo si tenés eh si tiene cuenta corriente caja de ahorro etcétera o si estás logueado a un usuario toda esa información la va a manejar el modelo para que al estar bien estructurada y ordenada cuando la necesites consumir por la vista a través del controlador se pueda manipular esos datos ahora vamos a ver los otos dos no me quiero no quiero spoilear vamos con la vista modelo vista controlador mbc la vista Es la capa de presentación de la aplicación se encarga de mostrar los datos de usuario y de presentar la interfaz de usuario de manera adecuada la vista recibe datos de modelo y muestra la información de una manera que sea comprensible y atractiva para el usuario en muchas aplicaciones web la vista suele estar implementada en html y ccs van apareciendo tecnologías que ya vimos vamos a ver entonces que la vista está hecha por html y ccs dentro de un marco de este framework Por lo cual la vista ya sabemos que la vamos a construir de la forma que ya sabemos sí la vista va a ser lo que vamos a mostrar los inputs en el caso de un formulario la todo el dropdown en el caso de un de un de una navegación esa va a ser la vista con la cual el usuario va a interactuar y el controlador el controlador actúa como intermediario entre el modelo y la vista Lo que le había comentando se encarga de manejar las interacciones del usuario como clics de botón eventos de entrada coordina las acciones necesarias para que el modelo y la vista se mantengan sincron ionizados En otras palabras el controlador controla el flujo de datos entre el modelo en la vista también está en tpt cosa que acá no dice pero lo que es el modelo y el controlador van a estar en typescript algunas veces se pueden mezclar un poquito porque podemos poner lógica de negocio dentro de los mismos controllers Ya lo vamos a ver un poquito más en el código pero sepan que si ustedes hacen un click o tienen que Mostrar la información de de una forma particular y el modelo te lo ofrece de una forma y y la vista la necesita de otra esa transformación la vamos a hacer A través del controlador que va a ser un archivo de typescript si una se utiliza una clase y ahí adentro manipulamos estos datos una vez que ya aprendimos el modelo vista controlador que es un patrón de diseño que se utiliza en angular vamos a ver lo que es el cli de angular y ustedes dirán qué es cli rarísimo esto vieron la terminal que yo les comentaba esto de git y github y que tenemos que tener instalado no y todo eso bueno en la terminal cuando nosotros escribimos comandos eso es una interfaz de usuario el cle de angular justamente es un command Line interface o sea nosotros en la terminal vamos a escribir cosas de angular y si es cosas de angular es un click de angular porque es una interfaz una terminal digamos que va a entender comandos de línea de angular Entonces esto es un poco el cli se lo explico antes de leer la introducción porque por ahí puede ser un poco abstracto entonces angular command Line interface Es una herramienta de línea de comandos que se utiliza para crear desarrollar y administrar aplicaciones web en angular de forma eficiente angular es un Popular framework de desarrollo de aplicaciones web y el cli proporciona una serie de utilidades y comandos que simplifican muchas tareas comunes en el proceso de desarrollo entonces a través de la terminal nosotros al escribir algunas instrucciones nos van a crear paquetes de cosas de angular nosotros no vamos a tener que crear 324,000 archivos como los cursos anteriores usted se acuerdan que cuando hicimos html tenemos que crear el archivo html cuando hacíamos css tenemos que crear html css Cuando hacemos javascript tenemos que hacer html cs y javascript bueno acá el Clean nos va a ayudar a hacer como grupos de carpetas ya prediseñados esto ya lo vimos un poquito en react con un armador de estructuras de react llamado bit en este caso vamos a utilizar el clip propio de angular Así que seguramente si ustedes No vieron el curso de no están familiarizados con esto no se preocupen lo vamos a ver desde cero en este curso bien para poder instalar el click de angular tenemos que hacer esto en la terminal npm install gg para que se instale de forma Global en toda nuestra computadora @angular guc de esta forma se va a instalar el click de angular en todo nuestro sistema vamos a hacerlo Hey Cómo les va acá sergi del futuro Bueno les cuento que hace unos días acaba de salir angular 17 Está increíble buenísimo buenísimo buenísimo pero pero pero tiene algunos cambios Por lo cual para poder hacer las primeras secciones de este curso necesitamos utilizar todavía Anger 16 Así que les voy a mostrar un poquito Cómo hacer para instalar el cli de angular 16 y después más adelante en el curso vamos a instalar angular 17 y poder utilizar todas las actualizaciones para ello vamos a ir acá a un navegador y vamos a poner npm angular c entonces acá vamos a poder ver alguna información del angular click que es la interface de angular que es la que si actualizamos al 17 podemos llegar a tener algunos problemitas vamos acá a la parte de versiones Y fíjate que lo importante es buscar la lts la lts de angular 16 la versión 16 tiene como lts angular 16.2.10 tenemos que recordar eso 16.2.10 vamos a instalar esa no la última si nosotros ponemos npm install angular Clear así como dice acá te va a instalar la última disponible que es la 17 y nosotros queremos instalar la 16 para poder hacer este curso Entonces cómo hacemos hacemos la siguiente forma mantenemos apretado shift clic derecho abrir la ventana de powercell aquí y aquí en esta ventana vamos a chequearlo un poquito en vez de poner Entonces npm yg @angular cli como íbamos a ver en el curso vamos a especificar exactamente Cuál es la versión que queremos y cuál es la versión es @ 166.20 Sí y de esta forma se va a instalar de forma global el click de angular Pero de esta versión que nos va a permitir hacer todo el curso que ustedes vieron más adelante vamos a ver la versión 17 y todos los cambios que tengen está buenísimo Así que hacemos enter esperamos un poquito y vamos a ver cómo se instala la versión 16 que nos va a permitir hacer todas las acciones que siguen ahí terminó si por casualidad vos ya habías instalado la 17 y necesitas desinstalarla se hace simplemente poniendo npm uninstall yg @angular c Y de esa forma te va a desinstalar todas todas las versiones que vos tengas de angular click y después ya haces esto que vemos acá arriba con el @ 16.2.10 ahora sí te dejo que sigas en el curso disfrutalo y nos vemos al final que estamos usando angular 17 nuevito nuevito nuevito bien ya hemos hecho esto vamos a pasar a la siguiente diapositiva y como podemos ver acá podemos crear una nueva app utilizando simplemente una línea de código O sea si nosotros acá escribimos eng New my app se va a crear una aplicación de angular llamada my app es increíble esto pero me parece que esto ya es para la siguiente sección porque claramente vamos a empezar a utilizar el click de angular para crear nuestra primera aplicación de angular Así que esta sección ha finalizado y nos vemos en la siguiente sección Hey interrumpe un poquito este video para contarte que si no estás suscrito por favor suscribite dale like y comenta Cómo te está yendo hasta ahora en el video a mí no solamente me pone muy feliz y me incentiva a seguir haciendo todo este trabajo que lo hago con muchísimo amor sino que me ayuda a posicionar más el video y también mi canal Y eso ayuda a que muchas más personas tengan estas herramientas para poder salir al mercado laboral de El Mundo de la tecnología Así que suscribite dale like y comenta y me puedes seguir en todas las redes como serg code y Próximamente voy a estar sacando más videos como este Muchas gracias y nos vemos en la la siguiente sección en esta sección vamos a hacer nuestra primera aplicación angular y para ello vamos a utilizar el cli de angular que habíamos comentado para ello vamos a utilizar este Comando llamado ng New y vamos a utilizar un nombre que nosotros querramos para poder hacer nuestra primera aplicación Sí vamos a achicar un poquito esto para poder abrir la terminal vamos a mantener apretado shift click derecho y vamos a poner poner abrir la ventana de powershell aquí y aquí vamos a escribir lo que habíamos visto entonces ng New que son ng es la palabra reservada de angular New que indica que va a ser una aplicación nueva y vamos a poner un nombre particular acá le podemos poner el nombre que querramos V poner el nombre que vos quieras Yo le voy a poner por ejemplo curso angular YouTube y vamos a hacerle ent ahora una vez que vos les hac enter te va a generar una estructura de carpetas la cual va a ser la aplicación de angular porque angular es un framework un marco de trabajo voy a explicar un poquito la diferencia entre framework librería y para qué se utiliza angular Sí porque hasta ahora no hemos visto Cuáles son las ventajas ya las voy a atacar un segundo vamos a ver que acá nos está preguntando usted desea que angular eh agregar la el enrutamiento de angular vamos a poner que sí Yo después le voy explicar que es un enrutamiento pero en principio le ponemos que sí acá sí acá me pregunta si queremos utilizar ccs css Sas o les en este en este caso como es un curso de angular directamente vamos a utilizar ccs no vamos a a darle mucha vuelta y ahí Esperamos que se genere las carpetas que le comentaba y como le comentaba se va a generar un conjunto de carpetas porque es un marco de trabajo es un framework Sí vamos a a trabajar en una tecnología llamada angular y esta tecnología nos va a poner límites la tecnología nos ofrece un montón de herramientas pero se trabaja de la forma que la tecnología te dice por eso es que es un framework se trabaja dentro del marco de trabajo framework dentro del marco de trabajo que te ofrece esta tecnología y por eso las carpetas se crean de forma automática con cierta estructura para que nosotros mantengamos esa estructura por supuesto después puedes hacer la aplicación que vos quieras podes hacer una aplicación de un banco una aplicación de un seguro una aplicación personal pero esta tecnología te ofrece una forma de solucionar esas necesidades que vos tenés para poder armar tu aplicación web y por eso es un framework y Cuál es la diferencia de una librería La la librería es una importación a otra tecnología depende de otra tecnología Por ejemplo si vos estás trabajando en javascript vos agregas react que es una una librería y utilizá todas la las herramientas que te ofrece react dentro de javascript y se trabaja de una forma muy flexible por eso angular van a ver que es mucho más rígido que react para que los que conozcan los dos r es muy flexible porque es una librería dentro de javascript y no tiene enrutamiento No tiene un montón de cosas que son otras librerías que te permiten ampliar la funcionalidad de react en el caso de angular nos va a dar el enrutamiento la forma de llamar eh a peticiones http nos va a dar todo todo todo nos va a dar observables la forma de ser reactivo todo nos va a ofrecer un paquete para que nosotros trabajemos directamente con todo eh la tecnología de angular es un marco de trabajo se trabaja de forma rígida nos ofrece typescript que también es muy rígido así que te dice cómo trabajar es un marco de trabajo en cambio la librería es un imp ort ación en este caso react hacia javascript en este caso vamos a ver que esta estructura es mucho más sólida mucho más robusta y justamente por eso muchas empresas prefieren trabajar con angular que con react porque angular es muy robusto muy estricto y se trabaja siempre de la misma forma se vamos a verlo un poquito más cuando lo veamos en código ahí podemos ver que ya terminó acá nos dio algunos warnings con respecto a git esto no se preocupen eh el git ignore y todo eso es propio de git así que ya estaríamos vamos a ir al desktop a nuestro escritorio y podemos ver que acá tenemos ya la carpeta creada sí Entonces vamos a abrir nuestro visual Studio code que es nuestro editor de código y vamos a arrastrar esta carpeta a nuestro editor de código para ver a ver qué nos trajo y podemos ver que trajo un montón de carpetas como yo les había comentado por las dudas si no conocen visual Studio code vamos a hacer un poquito de repaso este icono de acá es para ver las carpetas Sí donde estamos parados en este caso estamos parados en curso angular YouTube que en nuestro proyecto si vamos a la lupitas para poder buscar texto Sí en cualquier lado por ejemplo si nosotros ponemos angular vamos a ver que nos van a aparecer todos los lugares donde está escrito angular si nosotros tocamos acá Este es el manejador de de control de versiones en este caso si vamos a dar de alta el controlador de versiones git y después vamos a tener nuestro repositorio podemos manipular toda esa cuestión de de manejo de versiones y cuestión colaborativa en esta en esta Tab Sí después tenemos acá and theb que es básicamente para hacer un un debugging o o ir viendo que no tengamos errores en el código eso lo vamos a ver un poquito más adelante extensions que es donde habemos instalado los snippets y la todas las cuestiones de angular para que nos ofrezca ayudas nuestro código y podrás ver que también yo tengo instalado el slint que es para que typescript me me reclame si tengo algún problema eh en la escritura mía y también tengo bueno por supuesto eh github copilot que es una herramienta para que una Inteligencia artificial me ayude con sugerencia sí esto es es propio mío no no es de angular Pero bueno acá tenemos algunas cosas más y acá el último tenemos el chat este chat es propio de gith copilot ustedes no lo van a tener pero no se preocupen en este caso es una Inteligencia artificial con la cual vos podés chatear y pedirle algunas ayudas con el código la verdad que está muy bueno Eh si lo pueden comprar se lo se lo sugiero Pero bueno no por supuesto No no lo ofrezco en el curso ya que Es una herramienta de pago por lo cual no lo vamos a tratar de utilizar mucho eh Ya que bueno ustedes no lo van a poder utilizar en su casa y por supuesto eh No creo que le dé valor agregado al curso Aunque podamos hacer a lo mejor algún video en YouTube acerca de la herramienta copilot cómo lo utilizo para que ustedes también sepan eh si el día de mañana conviene comprarlo o no pero en este curso puntualmente como me voy a dedicar a la tecnología angular no lo vamos a ver muy en profundidad vamos a ver un poquito De qué está hecha esta carpeta podemos ver acá que que tenemos algunos archivos sueltos y algunas carpetas Sí primero principal tenemos el lo que es el ts config json que es toda la configuración de typescript si ustedes tienen dudas sobre esto tienen un curso entero de typescript acá arriba typescript desde cero por serg code y lo pueden ver en mi canal de YouTube y acá le vamos a ver un poquito más de la ahí les va a dar un poquito más de información de qué se trata tsconfig.js donde la está la configuración propia de typescript pero a grandes ragos lo que podemos ver Es se va a estar fijando que esté escrito eh según la versión es 2022 y Eh bueno tiene algunas cuestiones de de que sea estricto y etcétera sí eh esta configuración la trajo el cli de angular Por lo cual es la configuración recomendada a hoy 2023 de angular 16 para typescript así que yo Les recomiendo que en principio la dejen como está después tenemos acá eh este no le vemos atención no no hay problema esto tampoco lo vamos a configurar mucho o sea estos tres de abajo son de typescript lo vamos dejar ahí sin modificarlo mucho No se preocupen tenemos el ridmi que básicamente es un archivo para poder ayudar cuando nosotros subamos eh nuestro proyecto al repositorio el repositorio va a tener expuesta esta información por lo cual después lo vamos a modificar para que la persona que vaya a ver nuestro proyecto sepa De qué trata nuestro proyecto No es cierto después tenemos el package json esto es muy importante esto es en lo que se fija node para poder Instalar los paquetes esto si ustedes hicieron mi curso de r también lo van a ver Por lo cual digamos esto es en común con react y con muchos otros frameworks y librerías que trabajan con node la cual leamos está toda la configuración de node eh Y este proyecto node No es cierto tenemos el nombre del proyecto la versión los scripts que se pueden ejecutar desde node en el caso que pongamos npm Start que es muy muy conocido va a ver que lo que se va a ejecutar es ng serve O sea que vamos a utilizar ng el click de angular para poder ejecutar esta aplicación y así con las otras no es cierto tenemos eh Start que es para levantar nuestro proyecto tenemos bild que es para hacer una versión final para poder publicar la página en en algún servidor Como por ejemplo netlify o github pages tenemos watch que es para que se vaya bilando cada vez que hay un tipo de de modificación Y tenemos test para hacer los tests en principio nosotros los dos que vamos a utilizar son npm Start y npm build al final pero eso lo vamos a ver un poquito más adelante acá tenemos eh las dependencias que básicamente son todas las librerías que requiere este proyecto para funcionar a nivel productivo o sea es la parte las dependencias van a ser las que van a acompañar inclusive cuando se haga la versión de producción y podemos ver que trae la mayoría basada en angular ya que angular es un framework y te ofrece casi toda la estructura completa de la necesidad que uno tiene que cubrir Y qué es lo que hay Aparte rxjs que es la parte observable de angular tenemos ts que es la parte de typescript y sjs que es una configuración puntual también de angular Por lo cual todo lo que son dependencias es propio de angular por eso es un framework te trae toda todo lo que es enrutamiento eh formulari etcétera Sí y más abajo como podemos ver tenemos dep dependencies que ya no es lo mismo dep dependencies son las dependencias que únicamente se usan en desarrollo Entonces vas a ver que está karma acá que por ejemplo karma eh y Yasmín son para hacer testing entonces no es el testing no va en producción no va cuando vos lo subís va solamente en la parte de desarrollo para que el código sea un software de calidad y como pueden ver También tienen typescript que es la herramienta de javascript para poder marcarte errores de tipado y ayudarte a la hora de Hacer código Sí después tenemos pack lock Jason que es un archivo se hace automáticamente después de instalar en npm install según las las las dependencias esto no lo vamos a tocar y casi nunca se toca Así que Dejémoslo así tal cual está Lo que sí es muy importante es el angular.js que acá es clave no tocar nada porque es la configuración de nuestra aplicación Acá hay información muy importante eh en general esto no lo vamos a tocar pero sepan que acá está la configuración realmente de nuestra aplicación acá vamos a ver que cuál va a ser el icono que que vamos a utilizar todo lo que es la la carpeta de archivos estáticos que ya vamos a ver que está por acá dentro Entonces si nosotros queremos eh poner un icono va a ser eh eh vamos a ponerlo acá si queremos tener imágenes videos o cualquier archivo estático vamos a definir la carpeta acá esto es muy importante porque los archivos estáticos llegan estáticos hasta la versión final que vamos a subir si vos tenés imágenes eso no va en un paquete compilado como lo ya vamos a ver después que se hace un bill y todo el angular termina transformándose en un html css y javascript en el en el fondo porque eso sepan react angular y todos estos frameworks en el fondo Cuando uno lo va a subir termina siendo html cc y javascript Y si vos me preguntas por qué porque eso es lo que lee el navegador cuando vos abrís Chrome y abrí una página lo que lee el navegador es html ccs y javascript Y por qué hacemos una página en angular vos me preguntarás Por qué angular te da todas las herramientas para que vos logres tus objetivos reactivos y eh después a la hora de builder este framework se encarga de generar código eh javascript para que funcione de la misma forma que vos usaste Dentro de este marco de trabajo Sí pero lo que son los archivos estáticos dentro de assets quedan así porque las imágenes no se transforman en los videos tampoco Sí entonces acá es muy importante poner eh las carpetas que van a tener archivos eh estáticos pero no solamente eso fíjate que acá también tenemos un lugar donde poner nuestros estilos Por lo cual si nosotros traemos estilos que son de terceros por ejemplo cuando usemos bootstrap vamos a necesitar poner También acá el archivo de estilos de boostrap y en scripts también todo lo que sean javascripts de terceros Por ejemplo si vos vas a bajar una librería como boostrap u otras que usan javascript eh Y necesitan ciertas funcionalidades propias de la librería vamos a poner acá los archivos de javascript que necesite esta librería para poder utilizarla en nuestro en nuestro proyecto angular sí Y acá vamos a ver que hay otras configuraciones más que en general no vamos a tocar para este curso pero sepan que eh claramente es muy importante tener esto acá para que funcione Sí ya vamos a ver cuando instalemos boostrap que vamos a poner algunas cositas acá ya lo vamos a ver más adelante tenemos el git ignore para los que no hayan visto mi curso de git y github que también lo dejo acá a continuación si quieren saber más de manejo de controles y trabajo colaborativo vean ese curso es muy importante no quiero que sea obligatorio para ver angular desde cero que es este otro curso pero se lo recomiendo fuertemente porque es muy importante saber en cualquier trabajo te lo van a pedir pero este archivo de git ignor lo que hay es Son un montón de archivos y carpetas que nosotros queremos que ignore el manejo de versiones Por qué Porque son archivos que se generan automáticamente o son archivos de configuración o otra cosa muy importante que puede ser archivos que tengan información sensible por ejemplo si nosotros tenemos un archivo pun m de environment donde vamos a poner todas las las variables de de entorno de un ambiente por ejemplo testing ponemos el nombre y la contraseña nosotros no queremos que eso se sub ningún repositorio externo porque si no nos pueden hackear nuestra base de datos entonces Normalmente se ignora poniendo en el punto git ignore y se pone una variable de entorno pun m y ahí se ponen las ususarios contraseñas que no queremos compartir Entonces al poner en git ignor nunca se va a subir a ningún repositorio y cada persona que sea parte de nuestro proyecto tendrá tener sus propias eh variables de entorno secretas en su repositorio para que funcione su aplicación Sí también obviamente va a ignorar modules que ya lo vamos a ver pero es una carpeta donde se instalan todos los módulos que claramente pesa gigas y gigas y no necesitamos eso subirlo a github porque cada vez que nosotros bajemos nuestro repositorio podemos hacer un npm install e instalar nuevamente eh ese paquete entonces no es importante tener el no modules que vamos a ver que está por acá también otra cosa es el punto angular que ya vamos a ver que se va a instalar que es básicamente un cet para que vaya más rápida la compilación y otras cosas más como bueno el Sas si manejamos Sas y otras cosas más sí vemos que también las configuraciones visual de Studio code no queremos que se que se hagan acá tenemos el no modu que le comentaba no queremos que no modules eh se suba nuestro repositorio dis que es la versión final que cuando hagamos npm build Y si budee la la aplicación y termine en este html css y javascript que queremos para poder subir tampoco queremos que se suba eso ni los archivos temporales ni otras cosas entonces Kid ignor es un archivo en el cual digamos va a estar configurado así por defecto que está muy bien configurado para una un archivo para un proyecto angular eh va a tener todos los archivos y carpetas que se van a ignorar eh a la hora de subir nuestra información un repositorio por ahora lo dejamos así van a ver que la mayoría de estos archivos lo vamos a dejar como están salvo el angular Jason que les voy a mostrar Cómo agregar estilos y scripts de terceros que ya lo vamos a ver pero en general lo otro va a quedar muy parecido y van a ver otra cosa también que cuando hagamos alguna instalación de alguna librería eh También se va a agregar a dependencies y dep dependencies también lo vamos a volver a repasar en ese momento tenemos editor config que esto es propio del editor esto lo dejamos así no hay ningún problema es para por ejemplo editar Qué tipo de de teclado usamos este utf8 va a a poder capturar lo que son símbolos especiales las señas y todo eso no lo toquemos porque en general suele estar bien configurado y ahora sí vamos un poquito más arriba tenemos BS code que son algunas cosas propias de visual Studio code que van a ayudar a nuestro editor de código a entender nuestro proyecto de angular no Mod que es donde se instalan todos los módulos de forma automática al hacer un npm install en este caso se hizo de forma automática cuando hicimos el eng New así que no se preocupen que esa carpeta está creada y actualizada Y por último y ahora sí lo más importante es la carpeta crc que significa source fuente en inglés donde está toda la información real de eh lo que es nuestra aplicación angular todo lo que vemos afuera es configuración de nuestro proyecto angular y todo lo que está dentro de es nuestro proyecto angular de verdad y acá tenemos varias informaciones más tenemos est el ccs que es un archivo de estilos general es un ccs arriba que va a volcar toda la información hacia abajo eh Para todos los componentes y módulos que tengamos ya vamos a ver qué significa eso Main ts que es un archivo de configuración de typescript General tampoco vamos a tocar nada de esto Index html que básicamente es nuestro archivo de entrada Recuerden que todos los servidores todos los servidores buscan nuestro archivo angular o lo que querramos eh tenemos algunas cosas más por ejemplo acá tenemos el icono que podemos poner un icono distinto que se llame Sergio punto io y que sea de mi cara o lo que vos quieras esto ya lo vamos a ver el charset utf8 para que pueda entender que tiene símbolos especiales eñes el lenguaje etcétera sí esto es un html común y corriente pero la diferencia eh es que acá vamos a ver que se aplica cierta tecnología de ul eso lo vamos a ver un poquito más adelante pero sepan que es el famoso Index html donde todos los servidores eh buscan el archivo inicial sí f. io es nuestro icono que ya vamos a cambiar y acá tenemos dos carpetas assets que ya les había comentado yo que es nuestra carpeta de archivos estáticos donde van a estar las imágenes los videos etcétera s audio si tuviéramos y tatan tatan la carpeta app y acá está toda toda la crem de la crem entramos y está wow el routing enrutamiento app modul el módulo y app component que es el componente Entonces tenemos acá tres palabras clave enrutamiento módulo y componente no los quiero marear Así que vamos a volver a las diapositivas para poder ver las estructuras más importantes de angular Así que nos vemos en la siguiente sección en esta sección vamos a ver algunos conceptos básicos de angular y vamos a volver después a la parte del código para ver de qué trata primero principal tenemos algunos conceptos básicos como módulos componentes servicios dependencias plantillas directivas enrutamiento y metadata pero Estos no son todos Así que vamos de poquito y despacito ya que como les había comentado antes un framework es un marco de trabajo trae muchas cosas y no siempre Todas las necesitamos utilizar eh a fondo algunas podemos utilizarlas un poquito más de forma sencilla y otras sí necesitamos claramente saberlas bien en profundidad para poder sacar el mayor jugo posible a esta tecnología como podemos ver acá en esta imagen que está sacada de de la página de angular podemos verificar que eh tenemos una estructura puntual de cómo funciona eh una aplicación de angular en forma general esto puede parecer chino en este momento pero vamos a ver que se va a ir convirtiendo cada vez más fácil en leerlo peroo principal lo que dice acá es que eh Hay módulos de compon módulo componente módulo servicio etcétera etcétera etcétera después tenemos inyecciones de servicio eh la forma en la que está eh relacionada una propiedad y un evento con entre la plantilla y el componente toda la metadata eh que es una directiva ya vamos ver todo eso no se preocupen esto es chino básico por ahora pero cuando vayamos viendo uno por uno después van a ver esto y van a decir ah Esta es la plantilla Ah y cómo se comunica pl Sí con un evento hacia el componente Ah y el componente le pasa propiedades a la plantilla y la metadata es la información que tienen todos y el servicio es donde podemos ver dónde está toda la información y el módulo es para poder que esté ordenada la información y la directiva es para que funcione de tal forma la pantalla Entonces ya nos vamos a ir dando cuenta un poco de cómo funciona sin volvernos Loc porque si lo vemos así encima está en inglés peor todavía pero bueno igual aprendo en inglés Bueno vamos a ver qué son los módulos vamos a poquito a poquito porque es largo angular A diferencia de otras cosas es como que necesitamos mucha mucha base para que saber cómo funciona porque es un framework un marco de trabajo necesitamos entender un poco lo la parte global para poder llegar a ver la construcción aplicación de web después cuando empecemos a hacer aplicación web van a decir Ah bueno no Entonces esto esto y se va a comunicar toda la información que estoy dando ahora se va a comunicar mucho más fácil y van a entender todo esta parte este curso a diferencia del resto puede ser que sea un poco denso el comienzo pero tengan paciencia Por favor tengan paciencia y no se preocupen que cuando el curso arranque en la parte práctica van a estar muy cómodos con toda la información que les di antes entonces hagan un esfuercito lleguen hasta la parte práctica y van a ver que todo esto va a tener sentido vamos con los módulos son una parte fundamental de la arquitectura de la aplicación un módulo es un mecanismo de organización y encapsulación que se utiliza para agrupar componentes directivas y pipes que son filtros eh servicios y otros elementos relacionados eh en una unidad funcional coherente los módulos ayudan a dividir una aplicación en partes más pequeñas y manejables lo que facilita el desarrollo la mantenibilidad y la escalabilidad Qué difícil esta palabra el último a lo que voy es lo siguiente los módulos son como las divisiones de una aplicación piensen en en tenemos un árbol sí tenemos un árbol y los módulos son como eso tenemos un módulo general que es el que está más arriba de todo y abajo va a tenendo modulit eh fíjense la imagen sería como tener las pelotitas del albor entonces la parte de arriba va lloviendo le va dando información a las pelotitas de abajo entonces tenemos el módulo principal de la aplicación y adentro va a tener eh modulit más chiquitos que van a tener toda la información del de arriba y así Entonces es una cuestión de Cómo dividir la aplicación para que sea ordenada Entonces si nosotros tenemos un banco vamos a hacer cuenta que tenemos un banco la aplicación de arriba la lo que es el módulo de arriba tiene como la parte más general de la información y después ahí se dividen la parte de login entonces toda la parte de que nos nos vamos a loguear o el cliente se va a loguear eh tiene su módulo después tenemos la parte de por ejemplo de las pantallas y tod toda la cuestión de cómo van a ser las pantallas principales de la aplicación y por ejemplo la parte del contacto y la de las promociones dentro la parte de las pantallas tenemos caja de ahorro cuenta corriente eh Cómo invertir Qué es eso todo eso son módulos abajo de otros módulos Entonces si ustedes lo se ponen a pensar son como ladrillos de organización no es lo mismo que los componentes los componentes nosotros vamos a verlos los módulos no se ven los módulos son Cómo se organiza la eh forma en la que está hecha la aplicación web entonces módulos recuerden organización no se ve verlo no se ve es la forma en la que se organiza la aplicación los componentes Sí se ven Sí esa es la primera diferencia que tenemos que tener en cuenta Vamos a repasar unidades organizativas encapsulan funcionalidades dividen la aplicación importan y exportan elementos registran proveedores y evitan conflictos de nombres tenemos una librería y estamos vendiendo y comprando tenemos digamos cuando compramos al mayorista y cuando vendemos los dos se llama libro y libro eh claramente se va a llamar igual pero como están en módulos distintos porque uno de venta y uno de compra no va a haber conflicto sí Entonces es una división de organización no se olviden vamos a ver cómo se utiliza con el cli si nosotros quisiéramos hacer un módulo nuevo en nuestra aplicación vamos a poner ng modu y el nombre del módulo si y se va a crear un módulo nuevo dentro de nuestra aplicación y si no podemos hacerlo resumido con ng gm o ng o ngg gm pero yo por ahí se lo digo en inglés porque estoy acostumbrado a decirlo en inglés ng gm que es generate module y nombre del módulo sí esto puntualmente yo lo utilizo mucho trabajando pero en este curso lo vamos a ver un poco más por arriba No creo que hagamos muchos módulos porque Normalmente se modularizacion muy grandes como la decía bancos etcétera entonces vamos a verlo vamos a ver cómo funciona un módulo y cómo funciona un enrutamiento en un módulo pero no vamos a ver Muchos módulos ya que como les comentaba eh No vamos a ver una aplicación tan grande en este curso quizás en en algún curso un poco más avanzado de de angular o cuando saque un curso de una aplicación grande eh que esté en esta tecnología posiblemente utilicemos esto pero sepan que existe y que eh Cómo funciona y yo después le voy a mostrar igual un módulo el módulo general de la aplicación que vamos a utilizar Y cómo está hecho pero no vamos a tener muchos módulos A eso me refiero Sí vamos un poquito más para adelante y acá tenemos algo que sí vamos a poder ver en el código que ya tenemos y cómo es el módulo este módulo tiene importaciones acá arriba que son las importaciones típicas de javascript en donde ponemos exportación acá si y acá el archivo De dónde viene exportado en este caso ng modu y comon modu que son módulos propios de angular vienen de angular Core y angular common y en el caso de mi componente viene de Eh mi componente sí podemos ver este en modul que es un decorador esto cuando va con una ara y una palabra es un decorador y esto sirve para configurar si para configurar lo que es la la aplicación angular esto lo que lo que vimos en la imagen que decía metadata es esto son los decoradores este ng modu quiere decir que es un módulo si es un módulo tiene un ng modu sí y este enzim que tiene adentro Recibe un argumento Y qué argumento Recibe un objeto en el cual tenemos declaraciones importaciones y exportaciones y vamos a ver que también puede haber providers y otras cosas pero vamos de a poco Entonces tenemos en un módulo tenemos las importaciones arriba tenemos el decorador enzy modle que es la metadata de un de un módulo Cómo sabemos que un módulo porque dice enzy modle y adentro de modu mandamos un objeto que tiene declaraciones Y qué van las declaraciones van con componentes si Y qué va en las importaciones otros módulos y que va en las exportaciones pueden ir en este caso componentes o no dependiendo si este módulo está relacionado con otros módulos porque vos si relacionas con otros módulos necesitas exportar lo que tenés en tu módulo a otro s Pero quédense tranquilo esto lo vamos a ver un poquito más adelante también podría haber providers que son proveedores de información Como por ejemplo en el caso hay casos particulares Ya lo vamos a ver más Adel no los quiero No les quiero mezclar información y todo esto a su vez está exportado export Class mi módulo O sea que el módulo está exportado sí solo Vamos a ver en el código no se preocupen vamos a ir De hecho en este momento y acá en el código como podemos ver vamos a ir a source app Y dónde puede ser que esté el módulo fíjense que acá dice app. modul sí Y esto es lo que vimos recién Sí si ven Esto es lo que vimos recién nada más que está un poquito poquito distinto vamos de a poquito primo principal las importaciones no están las importaciones las importaciones las importaciones y acá vemos dos cosas que no habíamos visto antes uno app routing module y otro app component el app component es como mi componente nada más que yo no lo tengo como mi componente Acá tengo componente app component sí Entonces está acá si nosotros hiciéramos más componentes van a ir todos declarados acá e importados acá arriba ya vamos a ver qué son los componentes pero quiero que vean qué es lo que va en un módulo y además va en imports van otros módulos Y entonces vos me decis eh o sea que hay módulos adentro de módulos sí recuerden lo que yo les he dicho es como un árbol hay módulos que ya te los ofrece angular Como por ejemplo browser modu que ya vamos a ver para qué sirve y app routing modu que es para enrutar Sí para que puedan Navegar la aplicación son módulos que importamos para este módulo entonces este módulo va a tener disponible información y características de otros módulos sí esto es muy importante los providers en este caso está vacío podemos borrarlo o no no hay ningún export o sea acá podría estar tranquilamente exports Sí y tener también otro otro array vacío en este caso podremos exportar por ejemplo app component pero en este caso ninguno de estos dos está utilizados los podremos borrar o dejar no importa si están o no vacíos eh es para que sepan que existen hay más cosas que se pueden poner dentro de un engine module lo vamos a ver más adelante y está boostrap que este boostrap ojo ojo ojo no es el mismo boostrap que vimos recién en get bootstrap esto es una forma en la cual se distribuye la aplicación eh de angular y siempre se está poniendo la el componente principal eh que va relacionado un poco con lo que se ve acá en el Main en Main ts que es esto sí la plataforma eh dinámica se hace a través de una una especie de renderización del app modu es una forma en la que trabaja angular en las últimas versiones Así que simplemente sepan que eh dentro del engine eh modu va a ir un un un atributo bootstrap con el componente principal de la aplicación no sepan más que eso siempre va a estar así salvo que que hagamos una un cambio muy muy grande siempre va a estar así así que no se preocupen denlo por sentado y punto este módulo como ven está en la parte más alta de la aplicación Por lo cual si nosotros hiciéramos módulos hacia adentro por ejemplo si este módulo fuera como les había comentado un banco y abajo tuviera login cuenta contacto etcétera serían módulos por debajo este irían los imports etcétera y acá habría carpetas de módulos Sí eso no lo vamos a ver muy en profundidad en este curso pero sepan que un módulo es una división organizativa de una aplicación y con esto hemos terminado módulos y vamos a la siguiente sección vamos con una de las secciones más importantes de todo el curso recién arrancamos pero esta sección va a ser clave ya que los componentes son s s super importantes primero principal vamos a ver qué son es un bloque fundamental de construcción para la creación de interfaces de usuario en una aplicación web interfaz de usuario es ui Sí ya pásense acostumbrado a esta palabrita ui interfaz de usuario los componentes son responsables de definir Cómo se ve y se comporta una parte específica de la interfaz de usuario de la aplicación cada componente presenta un elemento visual o funcional de la página web como un encabezado un pie de página un formulario una lista de elementos etcétera Ahora les voy a tratar de llevar esta información a la vida real si nosotros tenemos por ejemplo una página de Twitter y tenemos un listado de tweets ese listado de tweets es un componente la página entera es un componente de ese listado de tweets cada tweet es un componente y de ese tweet la parte del texto es un componente la botonera es un componente etcétera etcétera etcétera Esto es lo que se llama atomic design y es básicamente diseñar desde átomo a molécula a célula etcétera para qué componenti todo para que sea reutilizable esta es la palabra más importante si nosotros tenemos una botonera y tenemos varias botoneras y todas pueden ser dinámicamente reutilizables se hace un componente botonera si tenemos todos botones símiles se hace un componente botón y después obviamente cada botón va a tener sus características y cada tweet va a tener su información Eso no hay problema puede ser Dinámico lo que pase adentro pero Normalmente se suelen hacer divisiones de componentes y la diferencia con los módulos Cuál es porque decir Che los módulos también se bien para dividir Sí pero los componentes siren para dividir algo visual algo que se ve algo que en la pantalla se ve ya vamos a verlo con un ejemplo más bien práctico pero sepan que cada botón de de like es un componente la botonera es un componente el el tweet entero la publicación entera es un componente la lista de tweets es otro componente nada más que un componente conforma otros entonces son ladrillitos que confirman conforman una estructura más grande que conforman otra estructura más grande y al final y al cabo toda la pantalla es un componente grande que tiene otros componentes Sí porque se ve el componente se ve son unidades funcionales que no solamente además de verse le dan la funcionalidad en cambio el módulo no le da funcionalidad ni se ve el módulo es divisiones de trabajos divisiones como organizativas de una aplicación vamos a ver un poquito hacia adelante acá podemos tener las características principales bloques de ui recuerden ui es eh interfaz de usuario user interface esta palabra es muy importante definen vistas y lógica usan clases stript tienen plantillas html son reactivos altamente reutilizables acá está lo que les decía se encapsulan jerarquía en la ui obviamente hay una jerarquía si vos estás en una pantalla Ese es el padre y después tenés eh eh lo que vend la lista de tweets es el hijo y a su vez tiene hijos que son eh los tweets y a su vez tienen hijos que son las botoneras y etcétera etcétera etcétera o sea pueden tener hijos hacia adentro Sí hay jerarquías se encapsulan justamente porque tenemos estas capas No es cierto eh reutilizables Porque a lo mejor si tenemos un tweet cada tweet tiene su propio texto su propia cantidad de likes sí son dinámicos y reutilizables tienen platillas html que el html es donde vamos a hacer la estructura Sí pero también usan clases typescript donde vamos a estar haciendo la lógica entonces acuérdense lo que hemos dicho eh patrón viste modelo vista controlador modelo vista controlador Ah un componente tiene una vista en html y un controlador en typescript ya va se van uniendo los conceptos Sí ya vamos a ver un poquito más de esto y vamos a ver cómo se utiliza un componente con el angular click Cómo se crea hacemos ng generate component y el nombre del componente o si no utilizamos la parte corta que es ng GC component entonces ahí le podos poner por ejemplo si estamos haciendo un carrito de compras podemos poner por ejemplo eh sección de carrito sección de listado elementos a la venta podemos poner cada elemento de la venta eh cada botón sí vamos a ir componenti nuestra aplicación eh creando componentes Esto sí lo vamos a ver y vamos a ver que vamos a generar eh cierta estructura de carpetas eh de componentes no todos los componentes van a ir uno al lado el otro sino que vamos a hacer carpetas para que nuestra estructura de proyecto esté bien ordenado y sea cómodo para cualquier persona no solamente para nosotros sino cuando tengamos colaboradores es importante que cuando entren al proyecto puedan ver cómo está ordenado entonces va a decir módulos eh screens o o pages para que se vean las pantallas eh los modelos todo bien dividido y en el caso que tengamos por ejemplo una pantalla de carrito y otra pantalla de los ítems de venta vamos a dividir en dos grandes partes la la aplicación sí cosa de que sea muy clara el orden y vamos a ver cómo se ve un componente y acá ya empieza un poquito la complejidad porque el componente no es un solo archivo sí esto es muy importante un componente no es un solo archivo si es una unidad funcional si es un botón un tweet una lista es una unidad funcional pero se compone de cuatro archivos pero en realidad tres son obligatorios porque uno de estos va a ser el el de testing que en este en este curso no vamos a ver sí Entonces tenemos cuatro archivos que son el archivo del componente que este es el más importante que es el ts Sí el archivo ts de typescript sí Acá está el controlador puro eh que es el ts después tenemos el archivo html que es el de la plantilla sí acá es donde vamos a tener la estructura de lo que se ve entonces acá fíjense que va a estar más modelo y controlador el html va a estar bien la vista y después tenemos el archivo ccs que también puede ser es ccs si estamos utilizando eh otro tipo de de controles en el estilo pero en general suele ser ts html y ccs Y tenemos claramente el modelo y el controlador en esta unidad básica en en el typescript y lo que es la vista en el html y el ccs sí estos tres archivos van empaquetados los podemos poner en una carpetita y como podemos ver hay un archivo de prueba que es spec.ts donde se hacen las pruebas eh Y el testing de este componente puntualmente pero en este curso lo vamos a estar salteando así que en principio no lo vamos a ver pero sepan que existe para que si lo ven sepan De qué trata vamos a ver un poquito de cada uno vamos a ver primero el control del ts en principio vendría a ser como lo que se le llama componente sí tenemos acá las importaciones acá arriba y podemos ver ya que tenemos el de decorador component Recuerden que Antes tenemos el decorador modul y ahora tenemos el decorador component Esta es la metadata que yo les hablaba antes esto nos dice Qué tipo de de estructura dentro angular es porque la otra también era muy parecida es un archivo ts y Cuál es la diferencia Bueno uno es mul y otro es component y esto nos ayuda a organizar También recibe por parámetro adentro de los paréntesis un objeto pero la diferencia Cuál es tiene selector template URL y Style urls y Qué significa esto el vor va a ser la forma en la que le vamos a poder llamar sí a a nuestro componente la template URL es eh Cómo se va a llamar el la plantilla que en este caso le vamos a poner seguramente el mismo nombre pero punto html y la después la URL a a las distintas eh archivos de estilo puede tener varios No solamente uno obviamente por orden jerárquico se pone en orden pero Normalmente se suele utilizar uno solo y si necesitamos hacer algo general se suele poner en el styles.css de la aplicación en general Sí normalmente Esta es la forma en la que se suele ver después podemos ver acá dentro que hay una una clase una clase esto si ya vieron mi curso de typescript no les va a ser difícil si no les va a ser muy difícil entonces si no entienden que es una clase vayan a mi curso de typescript yo explico un poquito de programación orientada a objetos eh dentro de typescript que es un poco esto no las clases y qué hereda de oninit acá podemos ver que la clase se llama nombre del componente component también podremos llamarlo por ejemplo mi app component o o en el caso de banco component o Twitter component o lista de tweets component como querramos después eso se exporta como podemos ver y después lo agregamos al módulo etcétera eso ya sabemos implements quiere decir que hereda de oninit y est esta clase on init es propia de de angular que ya vamos a ver que es para hacer algo apenas comienza eh a renderizar el el componente vamos a ver que un componente tiene ciclos de vida Cuando comienza es cuando como una especie de nacimiento que es el oninit después cuando term de verse y después cuando se destruye Sí entonces eh Cuando tenemos ese ciclo de vida podemos hacer cosas puntualmente en esos momentos cuando nace cuando está ya cargado cuando termine de cargar y cuando se destruye podemos hacer distintas cosas para poder utilizar herramientas funcionales del propio angular sí acá tenemos un atributo de clase Sí propiedades del componente por ejemplo tenemos título tenemos un constructor que esto si no saben qué es también vayan nuevamente a mi curso de typescript porque es programación orientada a objetos eh los atributos de clase los constructores y los métodos de clase son formas en las cuales utilizamos estructuras eh typescript Como por ejemplo funciones que son los métodos de clase eh constructor que es una forma de instanciar la clase y los atributos vendrían ser como las variables fíjense que acá las variables no dice le título const título y el y la función no dice eh con función eh y la función de flecha fíjense que acá se pone directamente el atributo y acá se pone directamente el método porque son atributos de clase métodos de clase y es un constructor propio de eh programación orientada a objetos esto si no lo entienden vuelvan a mi curso de typescript que yo ahí lo explico Sí después tenemos la la el archivo html que es la plantilla donde podemos ver que es simplemente código html común y corriente pero no tenemos body todo eso porque ya le voy a explicar que es como un chang de código es un trozo de código propio solamente de ese componente No necesitamos hacer del html Head Body etcétera etcétera etcétera porque todo eso ya la aplicación te lo proven lo que estamos haciendo es tomar un pedacito sí un pedacito de código que vendría ser nuestro componente y utilizar esa parte del html que es la plantilla en este caso podemos ver que estamos utilizando dos dos llaves que esto se llama interpolación que es para poder asignar una variable javascript al html esto es muy loco fíjense que Si volvemos a donde estábamos Antes tenemos título que es una una propiedad un atributo propio de de esta clase que es un un String Sí una variable String que está dice mi componente Entonces estos estas variables las podemos utilizar en el código va ser una interpolación que se hace justamente con estas dobles llaves ponemos título por lo cual qué se va a ver se va a ver la palabra miic componente si le pusiéramos ahí eh Sergio está haciendo este curso se vería Ya lo vamos a ver en código pero quiero mostrarles que interpolación quiere decir que podemos Mostrar variables dinámicamente dinámicamente en el código Sí y bueno esto ya es estático esto claramente acá es estático y siempre eh se va a ver igual porque eh No estamos haciendo ningún tipo de interpolación ni nada más Sí si seguimos tenemos un un un componente la parte del componente de estilo css que es un archivo css sí acá podemos poner por ejemplo que el dip tenga background blanco que el h1 tenga un color de texto azul etcétera etcétera etcétera Sí no hay ningún problema y después tenemos el el archivo de pruebas de Spec que es donde se hace el el las pruebas sí los testing automático y se hace todo acá pero como ya le había comentado antes en este curso no vamos a llegar a ver eso seguramente en un curso avanzado de angular lo veamos vamos a ver todo esto un poquito en código vamos a ver primero el componente que nos trae por defecto y después vamos a crear un componente nuevo para ver un poquito cómo funciona sí vamos al código y bien acá en el código podemos ver que tenemos un componente que está en la raíz habíamos dicho que es app component que es el componente en sí el html que es la plantilla tenemos ccs y el Spec el Spec como hemos dicho no lo vamos a utilizar Así que lo voy a ir borrando para que no se confundan vamos a poner delete de forma permanente y ahora si tenemos tres archivos el ts el html y el ccs s con estos tres ya tenemos nuestro componente base y este componente es el componente que se llama app Root esto es muy importante dónde habíamos visto esto dónde habemos visto este selector app Root A ver vamos a Index html y Oh Acá está quiere decir que toda esta estructura html que nos da el Index va a estar disponible para toda la aplicación y todo lo que querramos renderizar dentro de angular se va a serc dentro del Body ven que el body está ya declarado dentro se llama a este componente principal entonces con app Root ya tenemos nuestro componente que abarca toda toda toda toda la pantalla entienden recuerdan que vamos a ir haciendo capas como si fuera una cebolla bueno acá dentro del Body que esta es la estructura principal del Index vamos a estar llamando app Root que es la forma en la que se llama un componente sí se llama como si fuera un tag propio de html Y esto es lo que dice acá el selector fíjense que el selector dice app Root Entonces ya sabemos que dentro de nuestro Index html estamos llevando este componente que es la pantalla entera tenemos el decorador component Y tenemos acá que señala que la URL de nuestra plantilla es esta que es esta de acá y en nuestro ccs dentro de una array es este podría ser varios por eso es un array pero en principio son estos tres que son las principales tenemos una clase app component se llama Y tenemos como le había mostrado un atributo de clase que dice title curso eh angular YouTube Sí vamos a levantar este proyecto vamos a abrir la terminal haciendo control ñ Sí y vamos a levantar este proyecto para poder verlo por primera vez Cómo se hace se pone npm Start sí Y usted dice Por qué se pone npm Start bueno Esto es node package management o sea es es un comando propio de node y Start era esto que habíamos visto acá en el package Jason ven acá Start Y qué hace este np en realidad llama Anger que es un comando propio de angular que es para mostrarnos en pantalla nuestra aplicación Sí para ir conectando un poquito todo con todo entonces si hacemos npm Start hacemos enter y nuestra aplicación se va a levantar por primera vez vamos a ir leyendo un poquito qué es lo que aparece acá abajo y vamos a tratar de ver que dentro de nuestro Index sí general vamos a tener este componente grande Sí vamos a esperar un poquito hasta que se inicie puede demorar un poquito angular A diferencia de react si ya conocen react es un poquito más lento pero tengan paciencia que la magia Ya comienza acá nos pregunta si queremos dar información a Google ya que angular está basado en Google podemos poner sí o no en este caso voy a poner que no y fíjense que Ya apareció acá la carpeta punto angular que son archivos temporales para que el buildeo de angular vaya más rápido sí guarda con esto este punto angular lo genera en nuestro click de angular para que lo que es la la muestra de la página vaya más rápido Sí es muy importante este punto ángulo Recuerden que también está ignorado Sí aparte del node modules el punto angular también está ignorado fíjense not modul y el punto angular también está ignorado para que no se suba a nuestro repositorio el día de mañana podemos ver acá que ya se compiló de forma exitosa y dice angular está en un servidor de desarrollo escuchando en el local Host 4200 vamos a mantener apretado la tecla control y vamos a hacer clic a esto y acá está esto es nuestro primer aplicación de angular y ustedes dirán Cheo esto yo no lo hice Sí porque lo que te hace angular es el angular click es darte un cascarón Y a partir de acá nosotros construimos nuestra aplicación sí Entonces esto ya es nuestra aplicación podemos ver que acá dice curso angular YouTube app y running si nosotros acá le queremos cambiar el nombre no hay problema le podemos cambiar y podemos ver que nos sugi algunas cosas por ejemplo crear un nuevo componente Cómo se hace A ver tocamos y dice eng generate component Y pone el nombre del componente eso es lo que vimos también en las diapositivas Si queremos usar angular materia Fíjate que podemos instalar angular Mater de esta forma Si queremos cre una dependencia así Si queremos hacer test así Si queremos buildear hacemos así sí también nos da documentación si hacemos clic acá nos abre el tutorial de angular si tocamos acá la documentación de angular c si tocamos acá angular material que esto también lo vamos a ver y bueno así tenemos el angular blog que están todas las cosas nuevas que salen que ya vamos a ver que pronto va a salir angular 17 lo van a publicar acá ya están mostrando los avances de angular 16.1.11 etcétera y bueno las dep Tools que es era lo que yo había comentado que íbamos a utilizar también está acá y podemos ver que esto es lo que yo le había mostrado para poder utilizarlo Sí o sea mucha de la información que yo les había dicho claramente está acá volcada también sí vamos a ir toqueteando un poquito acá para ver cómo cambia vamos a volver al código y vamos a ir viendo De qué trata primero principal el título curso angular YouTube y dónde sale esto a ver si lo podemos ver Epa acá vamos a ver si lo podemos cambiar vamos a cambiarlo acá vamos a poner Hola mundo en angular guardamos y fíjense que se vuelve cuando guardamos está escuchando los cambios y se vuelve a compilar ven acá abajo se vuelve a compilar esto es muy importante y qué dice acá Hola mundo en angular app running Entonces cómo puede ser que esté escrito esto en el html para que cambie se acuerdan que habemos visto la interpolación entre llaves vamos a ver si está escrito Así vamos a ir al html y este html es muy grande vamos a chear un poquito esto y un poquito esto para que se vea un poquito más y vamos a ver que tiene un montón de escritura esto a mí así no me gusta pero no importa tiene el estilo hecho acá dentro esto es rarísimo chicos Pero bueno no importa vamos a ver que acá está el estilo h1 h2 como se va a ver un poquito más para abajo esto se puede hacer en en en html recuerde que se puede escribir eh cosas ccs usando la tag eh Style no se suele hacer y después lo vamos a sacar de acá porque no me gusta y para abajo para abajo para abajo abo abajo abajo para abajo va arrancar el html en algún momento y acá llegamos acá llegamos Acá está vamos a ver que dice Welcome vamos a ver un poquito vamos ir viendo la pantalla Welcome acá arriba cambiárselo a esto poner bienvenido bienvenido vamos a guardar nuevo y dice bienvenido viste que cuando ya ya compiló va más rápido ahora tardó tanto como principio va más rápido hay un de la parte azul de arriba bla bla bla contenido si esto un html bastante cargadito Rocket ship esto Seguramente se refiere a que por acá abajo a ver dónde estoy no esto te lleva Twitter y YouTube Ah este el Rocker ship acá estamos que me vol a poner acá donde estaba y acá en el Rocker ship si Buscamos un poquito Acá está vieron que yo les decía que vamos a interpolar acá están las dos llaves y dice title ven app is running o sea Hola mundo vamos a poner acá es lo primero que escribimos guardamos y fíjense Hola mundo en angul es lo primero que escribimos s si yo quisiera poner otra cosa otra cosa para interpolar podemos hacer acá por ejemplo no sé subtitle s vamos a poner acá fíjense que esto que me está recomendando acá sí es eh propio de github copilot que es la Inteligencia artificial que me ayuda y te va sugiriendo cosas le podemos hacer caso o no haciéndole Tab en este caso yo no le voy a hacer caso voy a poner por ejemplo es lo primero que escribimos entonces de esta forma y ponemos un espacio acá y vamos a poner Esto interpolado sí así y vamos a poner acá subtitle sí subtitle Y ahí vamos a ver que dicen Hola el mundo en angular es lo primero que escribimos Y esto es Dinámico Sí después el día de mañana si nosotros queremos por ejemplo poner el nombre de una persona por ejemplo acá Pedro vamos a poner Pedro Sí y vamos a poner es la persona que está logueada guardamos y este Pedro en vez de venir de acá siempre lo lo consume des desde el módulo de users acá todo el tiempo va cambiando y depende quién lo use va a ser su nombre entonces acá dice Pedro pero si nosotros lo dejamos así con con todo Dinámico el día de mañana si lo configuramos de forma correcta eh va a decir el nombre que corresponda entienden Ahí vamos vamos entendiendo Cómo funciona un poquito después Bueno vamos a ir un poquito más para abajo pero en principio Bueno hay un título eh Hay un p qu sé yo entonces vos decís bueno primero principal que a mí me gustaría hacer desde ya les digo es sacar este este Style de acá a mí no me gusta el Style acá y nosotros tenemos si ustedes se fijan acá en la carpeta un css y el css está vacío el css esta así por qué no me pone todo en el css Por qué no sé pregúntenle a Juan Carlos angular por qué lo hicieron así yo voy a agarrar todo esto que está dentro del la Style eh tiqu tiqui voy a cortarlo sí lo voy a cortar sí voy a borrar todo esto acá y lo voy a poner acá en el ccs voy a guardar voy a guardar levanto de forma perfecta y fíjense que sigue todo igual sí y ahora tenemos bien dividido porque ahora tenemos en el ccs tenemos dividido o se el ccs tiene los estilos y el html tiene la estructura así tiene que ser siempre chicos eso poner el estilo mezclado es rarísimo no sé por qué ular así pero no importa vamos a cambiar algunas cositas para que ustedes vean que esto funciona como yo les digo por ejemplo background color del toolbar es azul vamos a poner rojo s guardamos yamos acá ya cambio de rojo s si Toc amos acá y lo ponemos en verde guardamos y cambia a verde acá tenemos otro azul Vamos a ponerle amarillo guardamos y cambia amarillo y bueno básicamente es un css común y corriente pero les quiero mostrar algo acá si ustedes ven en el ccc hay cosas que son propias de esta de esta de este componente Pero esto de acá arriba pareciera más algo que no debería ir solamente en el componente otra cosa más que no me gusta de cómo inicializa eh este proyecto a mí si vos me ponés dos puntos Host que es para que sea todo en general y me pones el fone family el font size el color de la Eso me parece que es más bien general Por lo cual yo voy a agarrar esto voy a cortarlo voy a cortar Sí y le voy a llevar a otro lado Voy a llevar acá al ccs general de la aplicación Acá está vacío y yo creo que esto lo del F family Me parece que va mejor ahí porque voy a ordenarlo por jerarquía si lo hizo Juan Carlos angular debe ser mejor que lo que hace Sergio acá puede ser el que sepa argumentar me porque Qué es mejor hacerlo de la otra forma dígamelo en los comentarios la verdad para mí no hay una mejor forma para mí se puede hacer de la forma que ustedes quieren les sea más cómodo pero eh yo claramente lo pongo acá o sea las cosas que son generales las pongo en el Style css y las cosas que son propias del componente las pongo el css el componente y las cosas que son del html las pongo el html y lo divido así porque me parece mucho mejor para para poder entenderlo Y para que lo entienda una persona nueva en esto y una persona que si yo estoy compartiendo un proyecto le sea más fácil ver cosas chiquitas cortas y divididas a todo junto en un solo archivo sí Y acá por supuesto podemos poner otro F family porque el fone family acá es este pero tranquilamente podremos por ejemplo ponerle otra otro fone family vamos a ver a ver qué le podemos poner V poner cen guardamos y ahí vemos que cambia la letra sí Perfecto Bueno bien Esto me parece más que suficiente para ver por encima lo que son los componentes vamos a ver un poquito Ahora Borrar toda esta cosa gigante vamos a hacer algo un poquito más sencillo si vamos a borrar esto vamos a dejar un poquito algunas cosas vamos a ir borrando algunas cosas que no necesitemos vamos a dejar solamente lo de Pedro Me parece que nos puede servir todo lo de abajo Lo vamos a ir borrando para que de algo un poquito más chico Sí vamos a guardar vamos a ver y ahí está nos va quedando esto de acá vamos a ver si lo puedo borrar también que es el el el humo Rocket fíjense que es como el humo de esta navecita Pero bueno por una cuestión de de poder enseñarles Me parece que no hace falta el Hum tenemos esto por ahora sí Pedro es la persona que está logueada acá vamos a ver algunas otras cositas primero principal una de las cosas que le quiero mostrar es que hay un router outlet acá que esto es muy muy importante Ya lo vamos a ver en nota se acciona esto pero fíjense que está en el html de la del componente principal este router outlet sí esto esto vayan viéndolo que existe esta esta llamada al router outlet y está en el componente principal en el html esto guárdelo que es muy importante Ya vimos entonces lo que es interpolación para poder llamar atributos y habemos visto algunas cositas más de eh En lo que es el componente Entonces tenemos acá importaciones el decorador del componente y y la clase en este caso se está exportando y este app component lo importa el módulo pueden ver que está importado acá y como es la aplicación principal la pasa por Bo si esto igual ya viene configurado así no se preocupen Y tenemos el ccs y el ts y el html que entre estos tres es un solo componente ahora vamos a tratar de hacer un componente nuevo vamos a abrir un poquito terminal vamos a con control c a cerrar hemos levantado vamos a cerrar el proceso y a poner como hemos visto en la diapositiva ng generate con g component pueden poner la palabra generate component pero yo voy a poner ng GC que es ng que es el comando de angular generate component y voy a poner un nombre de un componente en este caso V a poner por ejemplo componente padre sí padre así hacemos enter esperamos un poquito que lo lo inicialice y vamos a ver qué es lo que nos trae este componente padre vamos a ver primero principal me armó una carpeta que se llama padre acá dentro de esa carpeta padre Qué dice hay un ts sí que dice eh el decorador componente que está Port clase componentes Eso después tenemos el spects que este lo vamos a borrar porque recuerden que no vamos a hacer testing en esta en este curso tenemos el html que dice padre works simplemente Y tenemos el ccs que está vacío Cómo podemos hacer para ver para importar esta este padre Bueno vamos a copiar el selector que es app padre que Recuerden que funcionaba acá como pueden ver en App Root que se llamaba a este sí que es el el el la el componente principal vamos a hacer lo mismo pero ahora desde la app Root hacia el padre Entonces vamos a ir al html del app Root que es este sí app component y vamos a poner acá abajo abajo de este spam Sí vamos a poner entonces eh app padre se pone como un tag de html pero si se fijan antes se hacía así de de abrir y cerrar ahora a partir de angular 16 se puede hacer solamente utilizando la barra acá sí guardamos Y si utilizamos esto así ya va a estar funcionando el llamado al otro componente Entonces vamos a ver a ver si funcionó para ello tenemos que volver a levantar el servidor ponemos npm Start ya que me había faltado eh volverlo a levantar y una vez que levante vamos a poder ver el cambio Aquí vamos a guardar unos segundos hasta que vuelva a compilar en este caso va a compilar mucho más rápido pues ya tenemos el punto angular acá que es un temporal para que vaya más rápido ya lo hizo de hecho y cuando vamos acá vamos a actualizar y dice padre works Sí está medio metido acá lo vamos a sacar si les parece Para que no no se vea tan feo guardamos y ahí está padre works sí había quedado acá dentro porque estaba dentro del div este si no me había dado cuenta bien ya estamos entonces con eh hablando de que está funcionando de forma correcto Cuál es la idea ahora ver por qué funciona esto Entonces tenemos el selector app padre el htm L y el css si nosotros por ejemplo le pusiéramos a este a este html otra cosa por ejemplo Hola mundo en angular si guardamos aparece un h1 Y si en el cc pusiéramos que los h1 se van a ver de color rojo guardamos y vamos ver que se pone de color rojo este es nuestro componente si esto de acá es un componente todo lo de afuera es otro componente entonces podemos ver que los componentes pueden ir dentro de otros componentes Sí qué otra cosa más tenemos que saber que este export Class eh padre component al igual que el otro tiene que ir importado en el módulo sí tiene que ir declarado no importado declarado en el módulo entonces acá vemos que la declaraciones se puso automáticamente Y vos me decí Che Pero qué momento hice eso yo yo no me acuerdo que vos haya hecho Sergio eso no no no saben Cuándo se hizo se hizo de forma automática cuando nosotros hicimos esto cuando nosotros ponemos acá G C padre esto no solamente te crea estos tres archivos y la carpeta sino que también te agrega el componente a las declaraciones del módulo entonces básicamente cuando nosotros generamos con el click de angular alguna cosa eh te pone todo para que siga funcionando te actualiza la la aplicación entera para que siga funcionando lo mismo con los módulos lo mismo con los servicios lo mismo con todas las cosas que hagamos con el cli va a actualizar la aplicación entera para que siga funcionando y no tenga que estar configurando caso contrario que nosotros Hagamos una un componente de forma manual por ejemplo ahora voy a hacer un hijo no fíjense que voy a crear una carpeta acá que se llame hijo si se va a llamar hijo si y por ejemplo vamos a tratar de copiar la estructura vamos a copiar el ts acá dentro vamos a crear un un archivo se llama hijo. component.ts sí acá vamos a pegar esto para que no sea un poquito más fácil V a poner hijo hijo hijo hijo sí guardamos Esto me reclama porque no tengo ninguno que se llame hijo vamos a crear entonces acá un hijo punto component html y aparte de esto también vamos a poner un ccs hijo punto component ccs s Entonces tenemos Elo com. html que lo tenemos creado y el css bien esto a su vez podemos llamarlo eh de cualquier lado pero recuerden que esto hijo component nos tenemos que declararlo en el módulo entonces habría que llegar acá ponerlo acá y importarlo desde acá arriba sí Para poder hacerlo esto automáticamente fíjense que si yo lo pongo así lo que hay que hac es control espacio y enter y lo importa de forma automática guardamos y se supone que ahí tiene que estar compilando de forma correcta vamos a ver si podemos utilizar el hijo vamos a escribir acá en el hijo un h1 que diga yo soy el hijo Al contrario de dar vader y vamos a llamar este hijo Sí vamos a llamar este hijo desde el padre Sí vamos a ponerlo acá Hola mundo en angular y acá vamos a poner por ejemplo app hijo sí V guardamos y dice Hola mundo en angular Yo soy el hijo o sea esto está dentro de esto que a su vez está dentro del otro componente fíjense Cómo van siendo como capas de cebolla no y ya vamos a ver cómo se pueden comunicar qué funciona Cómo se renderiza un montón montón de cosas vamos a ver de componentes pero de a poco porque si no se le va a hacer muy abstracto fíjense que este componente lo hice a mano no lo hice con el generador que habíamos hecho antes y sin embargo funciona de forma correcta siempre y cuando esto lo declaro en el módulo eh Y esto Bueno creo el css el html y el el ts pueden llegar a ver pueden llegar a ver que hagan html acá dentro lo cual es rarísimo no se los recomiendo y también ccc acá dentro no se los recomiendo importen un archivo html importen un archivo css para que les funcione de forma correcta y creo que esto ha sido más que suficiente con componentes por supuesto esto lo vamos a volver a ver muchísimo en el curso porque esta es la parte más importante pero para hacer un Introducción a componentes está más que bien Así que nos vemos en la siguiente sección bien habíamos visto un poquito la interpolación de datos y ahora vamos a ver un poquito más en profundidad ese ID vuelta entre la vista y el controlador en un componente enlace de datos se refiere a la capacidad de conectar y sincronizar automáticamente los datos entre el modelo que representa el estado de la aplicación y la vista la interfaz de usuario que muestra los datos la ui sí eh el enlace de datos es una característica fundamental que permite que los cambios del modelo se reflejen automáticamente en la vista y viceversa sin necesidad de intervención manual Qué significa esto que si tenemos información dinámica como hemos visto los títulos el subtítulo Y eso y lo volcamos a a la vista con el interpolador se va a hacer de forma automática sin necesidad de hacerlo manualmente escribiendo un texto estático y también al revés si tenemos un evento por ejemplo un click Nosotros le podemos avisar desde la vista que el usuario hizo un clic en la vista y podemos hacer una acción en base a eso vamos a ver un poquito Cómo se ve en el código fíjense que esto es desde el componente hacia la vista al dom es la vista si document object model el componente el ts si el typescript y este es el html s entonces habíamos dicho que desde el componente hacia el html podos utilizar una interpolación con dos llaves y si es una propiedad puntual por ejemplo acá dice color rojo perdón sí acá dice color acá sería rojo si acá dice tamaño acá dice grande para estoy diciendo cosas medio obvias para que ustedes entiendan eh podemos pasar una de esta forma esto variable Entonces si depende de la la propiedad está siempre en el html si depende de cosas que pasan en el componente puede ir cambiando este valor de forma dinámica y la vista va cambiando sin necesidad que lo hagamos a mano no es que todos los botones son rojos no van a ser rojos únicamente es lo que el modelo diga que sean rojos Sí y al revés también fíjese que un evento por ejemplo click está escuchando un evento click el manejador handler es manejador en inglés eh hacemos clic en el dom hacemos clic en el html el usuario hace clic en la pantalla y el evento clic lo escucha Y lo maneja el componente por ejemplo Cuando haces clic mandas a otra página cambias el color el fondo Entonces tenemos para allá del del componente hacia el dom tenemos valor y propiedad valor y desde el dom hacia el componente tenemos eh eventos y manejadores de eventos y en model básicamente es ID y vuelta sí es un doble binding lo que vendría a ser como un un doble un doble manejo de para acá y para allá si esto ya lo vamos a ver de esta forma también se utiliza en el caso de los de los formularios Ya lo vamos a ver más adelante aunque esta no es mi forma favorita de manejar las cosas Por lo cual si bien lo vamos a ver después cuando hagamos trabajos prácticos no lo voy a hacer de esta forma porque no es la forma que más me gusta trabajar bajarlo lo que vendría ser las propiedades nuevamente utilizo esto y en formularios utilizo formularios reactivos que a m me parecen una mejor solución para utilizar formularios Sí basándonos en esto que yo les comentaba que tenemos el template que es el html tenemos el componente que es el ts y ven que ya se va empezando a entender y cómo se cómo cómo se comunica el componente que es el ts con el html bueno con el property binding esto estos dos si nosotros le pasamos o el texto plano o una propiedad con el valor Entonces el componente le pasa a través del binding es la conección a través de de una propiedad Yo me puedo comunicar desde el componente al html o sea de esta forma de estas dos formas de arriba sobre todo esta de La segunda si tengo color yo le puedo pasar rojo y se pone rojo sí Y cómo se pasa del dom del de la plantilla del html del dom sí cómo se pasa hacia el componente con el manejador de eventos si haces un click even handler si even binding se llama el componente y hace algo si haces un clic acá haces una acción por ejemplo llama un servicio etcétera Sí entonces podemos ver que ts al html se hace de esta forma y si tuviera un hijo lo mismo mandar información con esta forma con property eh Y el valor Sí con con atributo y valor así y podes desde el hijo hacia el padre con un evento el hijo para poder comunicar con el padre también un evento Sí ya lo vamos a ver un poquito más en profundidad pero entiendan que desde el componente al dom con propiedades y valores y desde el dom al componente con eventos sí no sé si esto es muy difícil ya lo vamos a ver quédense tranquilos qué es lo que hace un enlace de dato conexión automática sincroniza datos entre el modelo y la vista unidireccional los cambios en el modelo se reflejan en la vista eh bidireccional También puede ser cambios de la vista se reflejan en el modelo por ejemplo formularios que yo les comentaba reactivo ojo con esto reactivo que es lo que yo le comentaba los formularios utiliza observables para actualizar en tiempo real y acá después más adelante vamos a ver signals simplifica interacción facilita la creación de aplicaciones interactivas porque es justamente para que el usuario cuando haga clic haga cosas eh todo funcione de forma reactiva y automática y automatiza actualizaciones cambios se reflejan sin intervención manual no hace falta que el usuario haga nada para que las actualizaciones se vayan haciendo de forma automática con un simple clic se puede actualizar un texto sin que el texto sea escrito a mano Sí bueno Esta es la otra imagen que habamos visto esto es básicamente lo mismo un poquito más explicado ya vamos a ver lo que son servicios y módulos un poco más en profundidad vamos a ver un poquito en código Cómo se hacen los enlaces de datos Entonces como habíamos comentado acá tenemos un atributo en este caso va a ser valor contador sí cero sí de tipo number cero porque acuérdense que usa typescript O sea hay que tipar lo es tipo number igual cer Sí si no vieron el curso de typescript ya saben dónde verlo entonces empezamos con un valor de contador cero y acá tenemos dos métodos de clase que son incrementar y decrementar Y qué hacen eso incrementar y decrementar o le suman uno al al valor contador o le restan uno al valor contador entonces acá tenemos un binding de propiedad o sea mandamos estamos mandando la información hacia el html mandando la información hacia la plantilla mandando la información hacia el dom sí todas esas nombres en este caso son una sola cosa que es la parte del html entonces valor contador lo estamos mandando hacia hacia el hacia el html Entonces cómo empieza en cero y el html me va a llamar a estos dos eh métodos con un evento cces cuando vamos a estar escuchando clic y cuando haga clic va a ser o incrementar o decrementar cómo se ve en el html se ve de la siguiente forma contador dos puntos valor de contador que esto está eh el html recibe la propiedad como pueden ver recibe la propiedad del del componente Recuerden que eh esta interpolación de datos con los dos las dos llaves lo que hace es recibir la propiedad del controlador y mostrarla de forma dinámica entonces acá va a aparecer un cero sí que que quede claro que este valor contador va a ser un cero Porque si vamos acá de nuevo valor contador es un cero sí Entonces vamos de nuevo Esto va a ser Dinámico no es como html olvídense html esto es angular contador dos puntos cero si yo toco incrementar que es un botón si fíjense que acá hay un escuchador de evento click está escuchando el evento click clic clic s y tenemos dos botones uno que escucha el clic en el botón incrementar y otro que Escucha clic en el botón decrementar si son dos botones uno decir incrementar y otro decrementar y qué es lo que hace si vos le haces clic al botón incr llama al método incrementar si vos le haces clic al botón decrementar llama al método de incrementar y esos métodos están eh hechos en el controlador si vamos acá de nuevo incrementar le suma uno al contador y decrementar le resta uno al contador Entonces si volemos acá y le hacemos clic a incrementar Qué hace esto y le resta uno el contador entonces automáticamente como está vinde como está relacionado de forma eh automática reactivamente va a el valor del contador Entonces nosotros tocamos un clic y no se va a renderizar la página de nuevo como pasaba en el html estático no angular va a mantener una sola página sin sin que se refresque y va a cambiar solamente el valor de este pedacito de código Y eso es lo importante angular para eso usamos angular para eso también se usa react una sola página single page application una aplicación de una página sola nunca se actualiz sea nunca se refresca Pero sí va cambiando los datos de forma reactiva y para eso usamos angular Sí ya vamos a ver esto en código Sí después otra cosa que quería mostrarles el tema de la metadata que ya lo vimos un poquito por arriba que es eh estos estos decoradores que van con ara y el nombre que sirve para diferenciar entre distintos tipos de de archivos typescript por ejemplo componente módulo injectable etcétera que eh si lo vemos eh de esta forma nos ayuda configur eh dice Define Cómo se comportan las partes de la aplicación se utiliza decoradores para esto se utilizan component eng modu enable etcétera y muchos más personalización ajuste el comportamiento para con propiedades clave componente la metadata para componente incluso plantilla estilos etcétera el la la metadata de módulo Configura los módulos declaraciones las importaciones que movimos el servicio etcétera bueno todo esto ya lo vamos a ir viendo uno por uno en cada uno Ahora nos vamos a concentrar sobre todo en los el en la metadata del componente Sí igual que esto de los enlaces de datos también es del componente Así que vamos a ir un poquito al código habíamos visto que en el padre decía hola mundo en angular y tenía el app hijo por ahora el app hijo lo vamos a a comentar haciendo control y cierre de llave Sí si no podemos comentarlo haciendo igual que en el html eh sería menor eh signo de exclamación gu gu gu gu mayor Y de esa forma se Comenta sí Y entonces eso no no no le va a dar bola angular y aquí lo que vamos a hacer es lo siguiente queremos hacer un contador Entonces vamos a poner acá contador dos puntos y acá abajo vamos a poner entonces un p Sí en el cual vamos a poner por ejemplo valor contador Sí y cerramos este valor contador aparece eh de esta forma porque no está hecho acá en el padre de hecho fíjense que typescript ya falla porque no está linkeado esto con el padre hay que crearlo sí vamos al controlador y acá está vacío si no hay nada si acá estamos vinando algo que no existe vamos a ponerlo como habemos visto en la diapositiva dice valor contador dos puntos number porque esto es tpt hay que tipar igual c fíjense que acá G copilot me está recomendando que ponga cero bien ya funciona vamos a hacer entonces un botón incrementar y un botón decrementar decrementar perfecto vamos a ver cómo se ve y tenemos incrementar y decrementar y el contador en cero si tocamos este y este no pasa nada ahora cóm podos hacer para que pase algo acá vamos a hacer los dos métodos de clases incrementar si fíjense que acá Pilot me lo está recomendando que básicamente es lo vamos hacer a mano igual que es poner punto valor contador más más punto y coma esto si no lo entienden tien que ir al curso de javascript básicamente cuando ponemos más más le suma uno a valor contador y decrementar decrementar lo contrario si decrementar fíjense que me va a recomendar directamente hacer lo contrario perfecto acá van viendo algunos beneficios de usar Pilot Entonces tenemos incrementar aumenta en uno y decrementar resta en uno el valor contado Y ahora qué pasa esto va a andar se va a andar así de una vamos a ver no no anda porque esto no está escuchando el click Entonces vamos a ver cómo se hace el event binding que habos visto vamos a poner acá entonces entre paréntesis click porque está escuchando el evento y lo está mandando al controlador s igual incrementar y abrimos y cerramos llaves porque estamos Llamando a un método s y esto mismo lo vamos a hacer acá pero con decrementar clic igual decrementar abrimos y cerramos llave sí de esta forma está escuchando el evento clic y cuando hacemos clic llama a este método y cuando hacemos clic Llama a este método sí bien Si nosotros quisiéramos pasar algún atributo de acá hacia acá se usarían corchetes Sí ya vamos a verlo bien pero en principio digamos lo que son paréntesis es desde html hacia el ts y desde el ts hacia el html o son las dobles llaves para mostrar el texto o son los corchetes para poder hacer property banding como habemos visto en en la la diapositiva bien vamos a volver al código ahora vamos a ver funciona o no funciona y funciona en tiempo real se dan cuenta que esto no se podía hacer antes sin este framework o si hubiese que haberlo hecho en javascript sería un código muy largo porque tenés que escuchar el evento y tenés que agarrar y hacer un eh seleccionar el div o seleccionar en este caso el contador y y y que volcarlo y cambiarle era un montón de código y hoy en día mira con el poquito código que hicimos estos dos botones y este p y estas dos métodos y este y este atributo ya con esto chiquitito así ya tenemos un contador funcional es increíble fíjense y no se renderiza la página yo cada vez que hago clic fíjense no se recarga está buenísimo esto y otra cosa que les había mostrado que ya vamos a ver un poquito más adelante es que si nosotros tuviéramos app hijo acá también el app hijo puede mandar algo al padre o recibir algo del padre utilizando estas dos propiedades entonces acá sería eh dato hijo Sí igual dato padre eso Nosotros le mandaremos del padre al hijo y sería eh evento hijo igual manejador de evento del padre sí Y acá pondremos siempre event entonces si bien aparece en rojo porque esto no está todo declarado y por eso se queja acá a lo que voy es que nosotros podemos hacer un property binding sí tanto hacia adentro como hacia afuera al igual que si fuera un botón al igual que si fuera un tag o sea un hijo va a funcionar muy parecido a lo que es eh un un t común y corriente de html porque es la misma eh enlace de datos sí binding es enlace y Data binding es enlace de datos justamente en castellano no Quiero meterme mucho en esto porque esto vamos a ver como en una e en una sección más adelante que va a ser eh digamos de cómo eh mandar datos entre componentes Así que esto lo vamos a ver un poquito más adelante pero sepan que esto que vimos hasta ahora es algo muy importante dentro de lo que es el manejo de los componentes y el enlace de datos entre html y itss entevista y controlador entre vista y modelo Sí bueno Esto me parece más que suficiente para esta sección nos vemos en la siguiente sección en esta sección vamos a ver cómo se comunican entre componentes vamos a iniciar la diapositiva y dice cómo se envía información entonces entre componentes input y output input es entrada output es salida y vamos a ver cómo con estas propiedades eh los componentes pueden emitir hacia arriba o recibir de arriba hacia abajo información los componentes pueden comunicarse a través de las propiedades de entrada y salida un componente padre puede pasar datos a un componente hijo mediante la vinculación de propiedades de entrada y un componente hijo puede emitir eventos que el componente padre puede escuchar a través de las propiedades de salida Recuerden que yo les había mostrado esto con los paréntesis podemos se emite y con los corchetes si ve vamos a verlo un poquito más eh ahora en código pero es básicamente lo que les he explicado un poquito cuando haos visto eh la sección anterior Sí vamos a ver cómo funciona esto y acá tenemos primero el input vamos a ver que tiene un decorador Sí pero en este caso va a ser para declarar una variable de entrada Entonces tenemos en el componente hijo puede definir propiedades de entrada utilizando el decorador input Fíjate que dice input abre y cierra paréntesis estas propiedades representan los datos que Se esperan recibir del componente padre sí Y dice dos en el componente padre puedes vincular datos a la propiedad de entrada del componente hijo utilizando la sintaxis de corchetes en el marcado del template entonces fíjate que acá es como yo había explicado Antes tenemos dato de entrada que es la variable que declaramos en el hijo sí va entre corchetes sí O sea que lo que declaramos en el hijo con el ar input eh paréntesis y y nombre de de variable y el el tipado lo ponemos dentro de los corchetes esto es es lo que recibe el hijo y el padre qué es lo que le manda le manda lo que está entre comillas después del igual sí o si el padre le envía Esto sí cces podemos ver acá que el componente padre eh En este caso Este es el ts del padre dice cuando un valor de la propiedad del componente padre cambia áula automáticamente actualiza la propiedad de entrada del componente hijo esto proporcionará eh una forma eficiente y automática de mantener sincronizados los datos entre componentes O sea que si el padre Le cambia el valor desde padre o se cambia esto automáticamente el hijo se va a renderizar Sí y el hijo por ejemplo en el caso de recibir este dato de entrada esto ya sería el html de el hijo o sea para para hacer un resumen esto V ser el ts del hijo este vendría a ser el html del padre este vendría a ser el ts del padre y este vendría a ser el template o sea el html del hijo Entonces si ponemos eh entre llaves dato de entrada con interpolación de datos vamos a ver que se va a renderizar este dato que recibió del padre o sea desde el padre dice hola mundo lo pasa por acá al hijo el hijo lo recibe y el hijo lo muestra en el template s di en el componente hijo puedes utilizar propiedad de entrada datos de entrada en este caso como cualquier otra propiedad local puedes mostrar en el template realizar la lógica bas en el valor etcétera vamos a verlo un poquito más después en detalle cuando cuando lo ciemos en en Studio code Sí y el output acá es totalmente al revés se utiliza output y eventemitter para lograr la comunicación entre un componente hijo y su componente padre declaras una propiedad con output en el componente hijo y emites el evento con el event emitter o sea el el hijo emite un evento y el padre escucha esa emisión sí Entonces tenemos output message event igual New event emitter y acá ponemos entre eh mayor y menor el tipado en ese caso Stream Entonces ya sabemos que con este output vamos a mandar un Stream en forma de evento Sí y el padre va a estar escuchando el evento como si fuera un click vos haces click el padre escucha bueno en este caso el el hijo hace un envío de un de un Stream sí empezamos teniendo un un mensaje Stream vacío Y entonces Cuando hacemos la acción o hacemos el método Send message acá claramente le mandamos el mensaje en este caso le vamos a estar mandando vacío Pero puede ser que lo cambiemos por ejemplo acá vamos a ver que se va a escribir el mensaje en un input y ese mensaje cambiado lo vamos a mandar al padre cambiado si una vez que termine de cambiar el mensaje tocamos Send message y ya se envía eh cambiado no es que esto está vacío y automáticamente se envía vacío sino que se va a ejecutar Send message cuando Hagamos una acción en el hijo ya vamos a verlo dice dos este archivo html contiene una interfaz de usuario del componente hijo incluye un input para que el usuario ingrese el mensaje y un botón para para enviarlo utiliza ng model para vincular el input con la propiedad message del componente typescript Recuerden que si utilizamos ng model y ponemos message esta propiedad va a estar directamente relacionada con este input input Recuerden que es una entrada de texto Entonces si escribimos ahí por ejemplo escribimos Pedro automáticamente Esto va a ser Pedro si esto es porque una especie de formulario de un solo campo Esta es la la forma de hacer formularios que yo le dije que después voy a utilizar menos yo normalmente suelo utilizar la forma reactiva de formulario Y esta es la forma del template driven sí es la otra forma de todas formas eh tenemos que aprenderlo así que es muy importante que ustedes sepan que este message con el engine model así con corchetes y y paréntesis al mismo tiempo está ligado Por lo cual todo lo que escribamos en este input se va a ir escribiendo de esta forma Entonces cuando tocamos el botón eh y hagamos clic acá y haga Send message se va a enviar el nuevo valor de message Sí el archivo Define el componente parent component no sé que el padre que tiene la propiedad receive message o sea recibir mensaje sí para almacenar los mensajes recibidos des el componente hijo incluye el método receive message que actualiza esta propiedad cuando se emite elemento del componente hijo esto l esto es en el ts del padre entonces receive message está vacío y acá actualizaría lo que recibe el hijo entonces la plantilla html del componente padre incluye un componente hijo app Child sí en este caso nos le vamos a poner app hijo y el padre se va a llamar padre pero bueno Esto app Child y parent es padre de hijo en inglés y vemos que dice y utilice el evento de salida message event para llamar el método receive message o sea Utiliza este este estos paréntesis para escuchar el mensaje emitido y Utiliza este otro receive message para escribirlo en este receive message sí Y dice mensajes recibidos del padre Fíjate que cuando yo saco el Mouse de acá unos segundos dice mensaje recibido del padre y dice receive message o sea cada vez que actualicemos el mensaje desde el hijo se va a actualizar desde aquí desde el padre sí básicamente Esto es lo que hace cada uno de los de los de las partes del hijo y el padre vamos a hacerlo justamente este ejercicio vamos a llamar al hijo sí abajo de incrementar vamos a poner app hijo Sí vamos a cerrar acá y acá le vamos a pasar un valor sí Para poder hacerlo primero principal acá desde el padre le vamos a crear un un valor nuevo por ejemplo le vamos a pasar por ejemplo mensaje sí Igual vamos a poner mensaje desde el padre Perfecto ahí copilot me dio una buena respuesta vamos a guardarlo acá sí Y acá básicamente tenemos que pasarle entonces este mensaje sí a poner mensaje padre para que sea más fácil mensaje padre sí acá va a ser recibe hijo Sí igual mensaje padre este recibe hijo tenemos que crearlo si no lo tenemos todavía vamos a al hijo y acá en el hijo tenemos que hacer con el decorador input como habíamos dicho tiki acá se importa acá arriba fíjate y ponemos entonces entre paréntesis y al lado ponemos recibe hijo igual String sí perfecto vamos a inicializar lo vacío como habemos dicho y esto vamos a poner eh básicamente que en el html sí escriba el mensaje enviado fue dos puntos y acá poner en una p vamos a poner por ejemplo recibe hijo si vamos a poner acá para que no se confunda poner una un comentario Este es el mensaje que recibe desde el padre si comentamos poniendo control cierre de llave perfecto guardamos y vamos a ver si esto funciona vamos acá y por ahora el mensaje enviado fue mensaje desde el padre vamos a tratar de analizar un poquito esto acá puse mensaje padre mensaje desde el padre acá vamos a poner por ejemplo Ojalá Messi llegue al próximo mundial sí guardamos este mensaje de padre se lo estamos pasando acá al recibe hijo y el recibe hijo en el hijo tiene un @input recibe hijo vacío una vez que el Padre envía en este caso empieza vacío Sí pero podría Podría empezar tranquilamente así acá si nosotros no lo declaramos acuérdense que typescript me obliga a poner un signo de pregunta para que sepa que puede ser vacío Sí una vez que recibe el hijo la información que claramente esto es de forma inmediata porque no estamos utilizando un backend que puede llegar a demorar algunos segundos esto es inmediato porque toda la la aplicación funciona de forma sincrónica recibe eh la información del padre acá o sea yo estoy mandando el mensaje del padre recibe hijo o sea acá en recibe hijo se va a cargar la información de este esta información hermosa de Messi y si hacemos una interpolación de datos acá automáticamente se va a estar escribiendo lo que nos mandó el padre Entonces vamos a ver acá dice el mensaje enviado fue Ojalá Messi llegue al próximo mundial Sí ahora vamos a tratar de hacer lo contrario vamos a utilizar un poquito parecido el ejemplo que había hecho desde el hijo del padre vamos a utilizar output Sí vamos a borrar esto un poquito y vamos a borrar desde el padre también este mensaje padre vamos a borrar lo que hicimos recién porque quiero hacer otra cosa totalmente sí Esto sí lo vamos a dejar así vamos guardar guardar guardar guardar y podemos ver que ahora está Solamente el contador como estábamos antes sí el contador tuki tuqui tuqui tuqui tuki tuki sigue funcionando eh Y bueno para que no nos moleste De hecho acá en el padre lo que es el contador lo voy a comentar si lo voy a dejar acá y voy a escribir un poquito arriba elijo lo voy a poner acá arriba Ahí está quedó solamente esto de hecho esto también lo voy a borrar si les parece para que no nos moleste vamos a ir acá app component y vamos a dejar solamente el app padre si el resto lo vamos a volar y perfecto quedó app padre y rotter que ya vamos a ver qué es listo vamos a volver al código y está totalmente vacío y ahora está el padre por acá dando vueltas y el hijo nada más que no tiene ningún tipo de contenido s Entonces vamos a concentrarnos Ahora sí en el padre y el hijo Entonces el padre y el hijo están vinculados porque yo tengo llamado al hijo desde el padre ven acá padre html estoy llamando al hijo si tenemos hijo hijo padre vamos a ponerlos más cerca para que sea más fácil esto lo voy a chicar y esto también para que podamos ver tenemos padre padre hijo hijo sí controlador del padre eh plantilla del padre controlador del hijo plantilla del hijo la plantilla del hijo está vacía esto prácticamente está vacío el padre lo único que hace es llamar al hijo y acá tenemos las cosas del contador que la vamos a dejar un poquito más abajo y vamos a poner acá contador para que después también lo utilicemos al contador Sí así así no no lo borramos Porque después también voy a tratar de hacer algo pasando información del Padre A Hijo pero vamos a tratar de hacer esto que comentaba eh que que veíamos en la en la diapositiva en el padre Entonces vamos a vamos a poner recibo mensaje y vamos a inicializar como vacío sí perfecto acá copilot me dice okay Y además necesito Ahí está Mira a ver có cómo te te ofrece todo sí te dice eh recibir mensaje que es lo que nosotros necesitamos vamos a recibir un Stream y el recibo mensaje lo va a a completar de acá sí se entiende Este es un un una varia variable vacía y nosotros acá vamos a tener un método que se va a ejecutar con lo que nos mande el hijo y vamos a cargar lo que nos manda el hijo por parámetro en el recibo mensaje sí Entonces el padre vamos a hacer lo siguiente vamos a poner acá el mensaje recibido desde el hijo es dos puntos esto lo vamos a poner entre un h5 y acá vamos a poner Entonces cómo es lo que se llama recibo recibo mensaje si no me equivoco mensaje recibido estaría mejor no vamos a poner mensaje recibido me gusta más no sé por qué habemos puesto mensaje o recibo mensaje era raro Ahí está guardamos guardamos y ya tenemos Entonces el mensaje que se va a mostrar el método que va a recibir el mensaje y nos falta por supuesto la comunicación entre el padre y el hijo el hijo lo que vamos a tener acá es un output como habíamos dicho Entonces vamos a poner output si output Acá está entre paréntesis vamos a poner mira ahí me esta sugiriendo muy bien mensaje por ejemplo mensaje y vamos a empezar con un mensaje desde hijo igual New eviter String sí esto lo tenemos que importar y ahí lo importamos acá arriba sí input lo vamos a borrar por ahora vamos a dejar solamente output y bien acá tenemos declarado entonces mensaje dijo que va a ser un un emisor sí como vemos es un una instancia del objeto New event emitter Por lo cual Esto va a ser un emisor de eventos si lo que tenemos que hacer ahora es que se emita que se emita en algún momento Entonces para eso vamos a utilizar esto Enviar mensaje sí vamos a abrir cerrar y básicamente vamos a utilizar el dis punto mensaje desde el hijo emit AC dentro vamos a mandar una variable que vamos a utilizar desde un formulario Sí vamos a poner entonces mensaje acá String pero en vez de poner acá lo que nos dice copilot vamos a ponerlo vacío por ahora sí y puntocom este mensaje vamos a ligarlo al input para poder eh hacer que cambie con respecto a lo que nosotros escribamos y cuando toquemos el botón enviar se va a ejecutar este mensaje esto sí Entonces qué Vamos a mandar acá dis punto mensaje y usted me preguntan por qué dis qué es dis bueno tiene que ver el curso de typescript dis mensaje es porque se está refiriendo a este mensaje Eso es porque esto es un atributo de clase y esto está eh el dis se refiere siempre al a la atributo que está dentro de la clase por fuera de este scope sí si no entienden Eso Tienen que ir al curso de typescript para poder Ver programación orientada objetos desde typescript sí dis message se se refiere a este sí ya vamos a verlo cuándo se va a a hacer esta acción de emitir mensaje cuando Nosotros comemos el botón emitir mensaje y cuá se va a rellenar este mensaje vamos a poner un input para que la gente pueda escribir Sí vamos a guardar y acá Entonces vamos a hacer lo que habemos dicho vamos a poner una división primero Prim principal vamos a poner un un Label para para lo que vendría ser eh lo que vamos a escribir vamos a poner por ejemplo entrada vamos a poner escribí un mensaje para el padre mensaje para el padre puntos y acá va a poner input type text ID tenemos que poner entrada para que el Label sepa que es para esta y vamos a hacer lo que habíamos dicho el engine model Sí si nosotros ponemos engine model fíjense que acá me está ofreciendo una ayuda esta ayuda no les va a aparecer si ustedes no instalaron eh este ángulo snippets s si ustedes no instalaron este angular snippets esta ayuda que me está ofreciendo acá cuando pongo engine model no les va a aparecer una vez que me haga esa ayuda yo le hago enter y me va a poner esto claramente es un error porque binding no existe yo lo que tengo que hacer es ponerle una una variable que exista que en este caso es mensaje ponemos mensaje y acá me dice que engine model no es una propiedad conocida de input y esto se soluciona en la siguiente forma tenemos que ir al módulo porque esto Recuerden que es un formulario de forma template driven si ya vamos a ver los dos tipos de formularios de template o sea de plantilla y los formularios reactivos ambos necesitan que import temos en el módulo algo para que funcione tenemos que ir acá al módulo e importar acá lo que vendría ser for modu sí guardamos Y fíjate que acá ya no va a quejarse mal importante for module que este es para el template driven Porque si nosotros queremos hacer un formulario reactivo es reactive forms module sí que acá no aparece pero es de acá sí reactive form modu es el del formulario reactive Entonces form module es el del formulario template y reactive form module es el otro si lo vamos a dejar por ahora Total no nos molesta y ahora ven que anda Perfecto entonces Esto va a estar relacionado con esto Si nosotros escribimos algo acá sí automáticamente este mensaje va a ir cambiando de información y cuando nosotros a enviar mensaje se va a a mandar con esto actualizar ad pero nos falta Cómo enviarlo entonces tenos que poner un botón Sí vamos a poner un botón de type bottom porque no es un type submit porque no estamos dentro de un formulario vamos type bottom y acá vamos a escuchar un click sí y qué vamos a hacer vamos a hacer Enviar mensaje sí Perfecto entonces para que se entienda Label es básicamente el título input es la entrada de texto y el botón es para enviar el mensaje sí bien el botón va a estar feito si porque no estamos utilizando ni nada pero ahora en un ratito les voy a mostrar Cómo hacer para que ande Ah el botón hay que escribirle algo Enviar mensaje guardamos y ahí está perfecto dice escribi un mensaje para el padre acá podos escribir y Enviar mensaje el mensaje recibo desde el hijo es y por ahora es nada pero si ponemos por ejemplo no te preocupes Messi llegará al próximo mundial ponemos Enviar mensaje y no pasó nada porque nos olvidamos de conectar el hijo con el padre a ver Espera espera esper acá nos olvidamos de conectar el hijo con el padre sí lo que hay que hacer para que funcione esto es claramente utilizar este este método desde acá entonces lo que hay que hacer es poner como hemos dicho mensaje desde hijo vamos a poner mensaje desde hijo igual y acá el padre podemos recibir mensaje y ponemos la palabra event Entonces tenemos mensaje desde hijo que es Perdón que es este que estamos enviando y recibir mensaje que es del padre entonces la comunicación de padre hijo se hace de esta forma si ponemos las orejas para escuchar que son los los paréntesis y acá ponemos cómo lo vamos a manejar ahora sí guardamos y ahora sí no te preocupes Messi va a llegar al próximo mundial pemos envi el mensaje y ahí sí llego sí perfecto ya me había asustado pensé que Messi no llegaba al próximo mundial pero por ahora estaríamos llegando lo más bien bien como podemos ver entonces ya estamos comunicando del padre al hijo eh lo que son digamos strings pero si nosotros necesitamos comunicar por ejemplo otras cosas como eh el tema de incrementar el valor y todo eso podremos hacerlo también por ejemplo si yo necesitara que los contadores estuviesen en en el hijo no hay ningún problema yo podría agarrar esto y hacerle eh pasar digamos la información al hijo por ejemplo acá tenemos vamos a descomentar esto tenemos estos dos botones que están acá sí yo lo que podría hacer es cortar esto si pasarlo al hijo por ejemplo acá s tiqu tiqui vamos a ponerlo acá abajo y por ejemplo hacer estos dos métodos acá en el en el en el hijo por ejemplo acá incrementar acá decrementar sí vamos a hacer los dos en este caso incrementar y lo que tenemos que hacer con estos dos es hacer otra emisión Entonces vamos acá a hacer dos más de estos vamos a duplicarlo haciendo alt shift abajo para duplicar esto y en este vamos a por ejemplo poner eh incrementar desde hijo y este decrementar desde hijo sí Y acá no vamos a mandar un String vamos a mandar vacío solamente la emisión vacía si void y void void es la palabra reservada para enviar algo vacío entonces simplemente lo que nosotros queremos hacer es enviar un evento y el padre que lo resuelva Entonces tenemos los botones de incrementar y decrementar en el hijo ahora s vamos a ponerlo acá abajo vamos a dividirlo un di vamos a acomodar un poquito formato y lo que vamos a hacer simplemente es tanto en incrementar como en decrementar vamos a poner entonces dis incrementar desde el hijo deem no hace falta poner nada en el emit porque es un void está vacío y lo mismo en decrementar vamos a poner dis pun decrementar desde hijo punto emit eh Y va va vacío acomodamos un poquito el código guardamos y ahora cada vez que hagamos click en alguno de estos dos simplemente va a emitir incrementar o decrementar y el padre lo va a resolver Sí entonces lo que tenemos que hacer es acomodar acá un poquito la el código y vamos a poner si les parece bien Esto podremos borrarlo y poner así y acá abajo entonces vamos a poner los dos vamos a poner va a recibir incrementar desde hijo y el padre es incrementar si no me equivoco acá dice incrementar sí perfecto y lo mismo con decrementar decrementar desde hijo y acá es decrementar perfecto fíjense que no estamos no nos está enviando nada acá pusimos event pero acá está vacío Sí y el padre simplemente lo que hace es resuelve subir el contador o bajar el contador o sea los botones están en el dio no envían nada más que el evento o sea el evento vacío y el padre es el que hace la lógica esto vamos a utilizarlo muchísimo Por ejemplo si hay un montón de botones que los botones no queremos que la lógica la tenga el hijo sino que queremos que la lógica la maneje el padre Entonces el botón simplemente lo único que hace Por más que sea un corazón o más lo que sea lo que sea emite un evento vacío y el padre decide qué es lo que hace Ese botón Sí vamos a barrar un poquito acá y vamos a ver ahora daría funcionar las dos cosas combinadas sí vamos a ir y tenemos todo un poquito mezclado quedó un poquito mezclado la verdad que no es la el mejor diseño que he hecho en mi vida vamos a poner un par de br para que se separe por lo menos y Bueno aunque esté mezclado es para que ustedes vean cómo funciona escribí un mensaje del padre Entonces vamos a poner desde el padre tocamos acá y aparece esto y si ponemos incrementar y decrementar funciona perfectamente está un poco cruzado esto porque estamos haciendo como dos ejercicios al mismo tiempo la verdad que lo ideal sería entonces comentar un poquito esto no y acá en el padre por ahí comentar lo del mensaje y si guardamos acá Ah me falta el contador Perdón acá me me comí el contador lo mandamos para acá Ahí está perfecto y guardamos y ahí está sí tiki tiqui tiki tiki Entonces estos dos botones están en el hijo y este sería el padre sí lo mismo podría ser al revés así que bueno perfecto ya con esto claramente tenemos de cómo pasarnos información del Padre A Hijo pero vamos a ver que hay una forma más de pasarnos que información que es a través de un servicio y eso todavía no lo vimos Así que lo vamos a ver en la próxima sección como les comentaba en la anterior sección también hay otra forma más de hacer una comunicación entre componentes que es a través de los servicios pero los servicios sirven para más cosas Por lo cual primero vamos a introducir Qué son los servicios y después vamos a ver cómo utilizarlo para hacer un pivot de información y más adelante en el curso vamos a ver cómo se utilizan los servicios para otras cosas más y Qué es un servicio es una clase de typescript que se utiliza para organizar y compartir lógica datos o funcionalidades comunes entre diferentes componentes de una aplicación los servicios son una parte fundamental de la arquitectura de angular y proporcionan una forma de centralizar y reutilizar la lógica que no esté relacionada directamente con la interfaz de usuario vieron que los componentes son para reutilizar eh digamos fragmentos de código en la parte más bien visual bueno en en este caso es para no repetir fragmentos de códigos de lógica entonces con un solo servicio le podemos dar la misma lógica a varios componentes distintos en el caso del componente podemos utilizar eh varias veces eh un componente con cierta diferencia entre sí por ejemplo si tenemos un componente botom eh el icono puede variar con con algún tipo de parámetro y siempre es el mismo componente para reutilizar Sí para para para ahorrar código en el caso de servicio ahorraríamos lógica porque tenemos una lógica y le aplicaríamos varios componentes sin la necesidad de repetir ese código en cada uno de los componentes ya vamos a verlo primero principal vamos a verlo como les decía para hacer un pivot de información pero después vamos a ver que se puede aplicar muchas más cosas bien reutilización lógica compartida separación de preocupaciones dividida la lógica de la ui inyección de dependencias instancias proporcionadas esto se refiere a que los servicios se inyectan en los componentes entonces puedes tener 10 componentes y un solo servicio se inyecta en los 10 para poder usar de pivot para la lógica esta que les comentamos ya la vamos a ver un poquito más adelante centralización de datos almacén y gestión de datos compartidos o sea muchos componentes pueden utilizar un servicio para centralizar datos que esto es lo que vamos a ver ahora para poder compartir información comunicación entre componentes que es lo mismo que estamos diciendo Life cycle independiente O sea si el componente nace y muere el servicio Sigue estando O sea que a lo mejor nosotros podemos ir cambiando de pantalla de componentes y nosotros hacer hac persistir la información sin pasar por un backend podemos persistir en un servicio para poder cambiar de pantallas Y de esa forma no perder la información mientras un componente vive y muere ya que normalmente el componente al destruirse al hacer on destroy digamos terminar el componente se pierde la información que está no persisti en este caso el servicio nos puede ayudar para eso también y teste habilidad ya que es muy fácil de probar la parte lógica está separada la lógica de la la parte visual sí Cómo se genera un servicio con el c básicamente muy parecido al lo anterior ng GS nombre de servicio y se genera el servicio vamos a ver que esta lógica la lo que es la escritura del servicio es muy sencillo simplemente se pone inyectable y se pone provide in Root o sea en este caso va a estar provisto directamente en la raíz se puede proer en distintos lugares pero normalmente lo vamos a ver de esta forma es una clase de typescript y tiene un constructor y acá ponemos la lógica o la la o la o los parámetros que queremos compartir Por ejemplo si nosotros queremos que todos los componentes de una parte por ejemplo en un banco tenemos cuenta corriente queremos que toda la información del usuario esté en un servicio que sea my user service podemos poner acá nombre del usuario cbu del usuario todo eso y por más que cambiemos entre pantallas dentro de del banco eh acá va a estar semip persistente en memoria para poder hacer cuestiones rápidas O cambiar de pantalla sin perder alguna información que necesitamos eh necesitemos i Sí para poder entender Cómo hacer para que estos servicios funcionen en un componente tenemos que ver qué son las dependencias porque el componente tiene que recibir ese servicio de una forma y se hace inyectando el servicio se inyecta una dependencia se inyecta un servicio y para esto se hace de la siguiente forma dependencias son los recursos externos y módulos de código que una aplicación necesita para funcionar correctamente estos recursos pueden incluir bibliotecas externas módulos de angular servicios personalizados Acá está componentes y otros elementos que se utilizan en la aplicación para realizar tareas específicas guarda con eso ahí tenemos eh Para lo que vamos a usar en en un comienzo servicios personalizados las dependencias en angular se gestionan principalmente a través del sistema de inyección de dependencias di que es lo que yo le comentaba que es una característica clave de este framework recursos externos bibliotecas y recursos de terceros módulos de angular unidades organizativas con funcionalidades servicios personalizados que esto es lo que vamos a utilizar ahora a la brevedad funcionalidad compartida inyección de dependencias gestión automática de instancias inyección de construcciones dependencias pasadas a través de constructores gestión de ciclo de vida creación eh control de creación y destrucción y teste habilidad facilita pruebas unitarias y de integración Ya lo vamos a ver eh de a poquito en primera instancia una inyección de dependencia se puede hacer de dos formas una poniendo en el constructor una declaración de una variable se pone private el nombre de la variable y se inyecta de esta forma mi servicio esto que estamos viendo en general es un componente como pueden ver el decorador dice componente y estamos inyectando un servicio entonces tenemos un componente e inyectamos un servicio eso lo vamos a ver ahora a continuación y hay otra forma más que es a partir de angular 16 que se usa la palabra inject Entonces no utilizamos el constructor sino que simplemente declaramos eh servicio Sí y ponemos al lado inject mi servicio ya vamos a verlo también en código no se preocupen en primera instancia vamos a ver cómo utilizar servicios para pasar información de un componente otro vamos a ir un poquito el código vamos a cerrar un poquito todo esto y vamos a ver si hacemos Eh un hermano del padre Sí para ver si podemos utilizar esto que les comentaba vamos a hacer vamos a abrir la la consola vamos a tirar un poquito el servicio y vamos a crear un un hermano vamos a poner ng generate component hermano Sí vamos a poner enter después vamos a hacer una aplicación nueva eh con nombres un poquito más más lindos para para no que no se nos haga lío con el tema familiar acá que estamos Armando no pero en primera en primera instancia lo que queremos es que el hermano y el padre puedan compartir información a través de un servicio que va a estar inyectado en ambos Sí vamos a esperar hasta que se genere como les comentaba se va a generar una un una carpeta llamada hermano que acá está y se va a poner en el módulo se va a declarar el hermano component Sí ya tenemos hermano perfecto acá vamos a borrar el Spec que es para hacer testing que no lo vamos a utilizar y vamos a generar un servicio si les parece ng GS o sea ng generate service y vamos a poner por ejemplo servicio familiar sí porque como podemos ver tenemos hermano hijo padre Entonces vamos a hacer eso y acá podemos ver que tenemos el Spec que es para hacer testing que lo vamos a borrar por ahora vamos delete y tenemos el servicio familiar Service fíjense que simplemente es un inyectable sí que está provisto en el Root y acá tenemos un constructor sí Para qué nos sirve esto les había comentado para poder hacer pivote información también además de otras cosas porque podemos poner por ejemplo métodos acá vamos a hacer por ejemplo lo siguiente vamos a acá en el servicio esto vamos a volver a ejecutarlo y mientras se ejecuta vamos achicar un poquito esto para verlo estamos en el servicio familiar service sí acá vamos a poner algunas cosas como por ejemplo nombre del hermano más grande vamos a poner por ejemplo hermano grande vamos a poner dos puntos String se va a llamar Juan Mira está me gusta hermano pequeño Mira fíjate Me dice Pedro impresionante copilot Muchas gracias Ya tenemos el nombre del hermano grande y hermano pequeño Sí después tenemos acá poner saludar saludar acá vamos a recibir uno de los hermanos Sí hermano dos pun String y vamos a poner consola Hola hermano O sea que uno de los dos hermanos puede saludar al otro y vamos a por ejemplo a decir preguntar por hijo sí Y acá básicamente vamos a poner perfecto acá me gusta Mira estamos retornando un streng Sí entonces básicamente esto es retorno un streng perfecto preguntar por hijo cómo está tu hijo cómo está tu hijo sí Perfecto entonces tenemos acá un saludar que va a ser un consol y un preguntar por hijo que va a ser un retorno de eh un String sí como para tener un poquito variedad vamos a hacer una inyección de esto en ambos hermanos vamos a ir a los hermanos vamos a ir primero al al padre Sí vamos a poner el ts y acá Cómo se inyecta habíamos dicho entonces que con un constructor vamos a poner el constructor acá constructor y acá tenemos que hacer de esta forma sí Y acá dentro de lo que es los paréntesis vamos a hacer justamente lo que nos está ofreciendo copilot que es poner private ponemos servicio familiar en este caso a poner un guion bajo y ustedes me preguntarán por qué porque normalmente los las inyecciones de dependencias se suele poner un gu bajo si gu bajo servicio familiar sí de esta forma para saber que todo lo que es guion bajo está haciendo una inserción de dependencias y lo que es observable se suele utilizar el signo peso sí dos puntos y ponemos servicio familiar service lo importamos con control espacio enter se importa acá arriba como pueden ver y ya tenemos disponible servicio familiar para poder utilizarlo en el padre vamos a copiar esto esto vamos a hacer así vamos a copiar esto si les parece y lo vamos a pegar en el otro hermano tiki tiki y acá tenemos perfecto tenemos que importar esto Perfecto entonces ya tenemos los dos hermanos los dos hermanos tenemos el servicio familiar importado lo que vamos a hacer es lo siguiente Vamos a ponerle un nombre a cada uno en el caso de El del padre se va a llamar de una forma y el hermano de otra sí vamos a hacer lo siguiente una cosa que no hicimos acá que me parece que podremos hacer que est interesante es hacer un getter y un setter vamos a ponerlo Así vamos a poner vacío esto vamos a hacer lo siguiente vamos no le vamos a poner nombre acá no le vamos a poner nombre acá vamos a poner así y así s vamos a poner signo de pregunta y signo de pregunta no vamos a definirlo acá me parece mejor que vamos a hacer lo siguiente vamos a hacer un getter y un set vamos a hacer get hermano grande y acá vamos a hacer un retor de hermano grande perfecto exactamente o vacío Sí y un set hermano grande set hermano grande perfecto acá así y acá vamos a poner dice hermano grande hermano que es lo que vamos a pasar y lo mismo con hermano chico get hermano chico o pequeño Perdón un String y vamos a hacer un return perfecto acá copilot me está ayudando un poco set hermano pequeño si ustedes esto no lo están entendiendo por favor revisen el curso de typescript desde cero que damos programación orientada objetos donde vemos los getter y los setter sí ent tenemos un getter y un setter de cada uno de estos Sí entonces básicamente lo que queremos hacer es tener desde el padre va a ser el hermano grande Entonces vamos a hacer lo siguiente Recuerden que yo les he dicho que es ciclos de vida en lo que es eh los componentes bueno ya les voy a explicar un poquito más pero les voy a mostrar un spoiler que es el que se utiliza para cuando se inicia el componente porque lo vamos a anitar para poder hacer este ejemplo entonces a poner implement oninit y este oninit lo vamos a poner acá que se llame de angular acá lo escribí mal Perdón Es oninit con mayúscula perfecto y para que funcione bien Esto tenemos que hacer un ng oninit perfecto bien acá Fíjate que me está ofreciendo justamente esto como como este va a ser el hermano grande vamos a poner solamente el primero que es set hermano grande si entonces acá tenemos que el hermano grande va a ser Juan y acá vamos a poner entonces hermano grande y acá lo que vamos a hacer es que el hermano grande hermano grande igual dis punto get hermano grande entonces básicamente este va a ser el vamos a poner nombre vamos poner nombre acá Nombre nombre y perfectamente ent acá estamos sete el hermano grande y después le ponemos hacemos un get por supuesto esto no tiene mucha lógica porque estamos sete y después estamos pidiendo la información y en realidad podemos hacerlo de forma directa Pero esto es para que ustedes vean Cómo van y vienen la información y también a su vez necesitamos que el hermano Sí este hermano haga lo mismo Entonces vamos a hacer más o menos lo mismo vamos a poner esto acá en el hermano vamos a poner acá necesitamos también que implemente onit ponemos acá esto lo vamos a importar acá en angular Core perfecto y nos falta también poner nombre s nada más que acá en vez de hermano grande va a ser set hermano pequeño y le vamos a poner Pedro y acá get hermano pequeño sí perfecto bien acá tenemos Entonces seteado el hermano pequeño y get hermano pequeño para obtener el nombre podemos ver que esto no tiene mucha lógica pero ya la idea de esto es que ustedes entiendan Cómo se comunica entre hermanos con usando el servicio sí Entonces ahora tenemos que ambos sete su nombre y tienen el nombre de forma Autónoma Entonces vamos a ponerlo primero principal Así vamos a poner en el padre entar todo esto y a guardar y lo del hermano el hermano vamos a borrar esto que dice hermano works entonces por ahora tenemos todo vacío esto de hecho si esto lo voy borrar vamos a borrar por ahora y el hermano también lo vamos a llamar de acá de App comp vamos a poner acá app hermano barra Ahí va perfecto un poquito y vamos poner por la duda para se diferencia sí como pueden ver no hay ningún tipo de comunicación entre padre y hermano acá sí no no hay ningún tipo de comunicación son dos componentes hermanos y simplemente vamos a utilizar de pivot El service para poder actualizar la información sí Entonces vamos a hacer lo siguiente Entonces vamos a en el en el app padre Sí vamos a poner entonces h1 nombre sí Y acá vamos a poner por ejemplo botón bottom y vamos a poner por ejemplo click y que diga saludar y acá que diga saludar Sí vamos a crear saludar y ojo con lo que voy a hacer acá tengan mucha atención en el padre vamos a borrar un poquito esto el contador para que no no nos complique la vida y esto sea un poquito más fácil esto se pone arriba del constructor si esto suele ser el orden que se suele utilizar y acá vamos a poner entonces saludar acá en saludar fíjense lo que yo voy hacer ojo esto es muy importante voy a utilizar dis servicio familiar saludar y en vez de poner dis nombre que es el nombre de de la misma persona que está saludando voy poner lo siguiente dis punto servicio familiar punto get nombre get hermano pequeño porque este estamos Este es el padre el hermano grande entonces yo lo que estoy mandando es el hermano pequeño yo estoy saludando al hermano pequeño entonces Entonces miren lo que yo estoy haciendo estoy utilizando un un método del servicio mandándole un atributo propio del servicio mismo fíjense Cómo se va empezando a cruzar la información sí y yo esto mismo lo voy lo voy a hacer en en el otro hermano fíjense vamos a tratar de hacer lo mismo vamos a guardar esto un poquito vamos a poner acá en el hermano lo mismo sí fíjense que voy a poner Exactamente lo mismo y acá voy a poner un poco lo contrario Igual vamos a ir al hermano sí esto también lo vamos a ordenar como corresponde sí perfecto acá vamos a hacer lo mismo pero vamos a hacer al revés en vez de hermano pequeño hermano grande hermano grande porque va a estar saludando Este es el hermano pequeño sí guardamos bien perfecto ahora tenemos todo listo entonces Vamos a repasar el servicio familiar tiene hermano grande y hermano pequeño que son dos strings que se seteen usando set hermano grande y set hermano pequeño y se guan o se se recupera la información hermano grande y hermano pequeño se puede saludar mandando el nombre del hermano al cual vamos a saludar y podemos preguntar por hijo si entonces también vamos a hacer esto vamos a preguntar por hijo también en el hermano en los dos hermanos Entonces vamos a poner acá por ejemplo otro botón más vamos a copiar Este sí Y acá vamos a poner preguntar sí acá preguntar por hijo y este Preguntar lo que va a hacer es básicamente lo siguiente vamos a poner dis punto y bajo servici familiar pun preguntar por hijo Ah esto esto devuelve me acuerdo sí esto devuelve un texto Perfecto entonces vamos a hacer lo siguiente vamos a hacer un conso loog mejor un conso loog acá conso loog de Esto va a devolver Cómo está tu hijo y esto mismo lo vamos a hacer en el otro más o menos Estoy haciendo lo mismo en los dos hermanos para que ustedes vean vean Cómo se comunican sí Esto es lo mismo guardamos y en esto también lo vamos a copiar así y le vamos a poner el hermano entonces básicamente los dos hermanos van a ser muy parecidos pero fíjense que esto ya es variable Sí el nombre va a ser variable y vamos a ver cómo se va viendo vamos a ver si esto anda primero principal Y fíjate que AC dice Juan y Pedro Por qué Juan está en rojo porque me parece que dejamos en el ccs un h1 A dónde está fíjate que acá dejamos h1 con red Vamos a ponerle al otro hermano un h1 con color Blue color Blue Sí para que sea un poquito más más divertido Entonces si ponemos abrimos acá con f12 el inspector s si no lo pueden hacer con clic derecho inspeccionar y acá en el inspector ponemos consola y vamos a ver de qué trata esto vamos saludar Juan y Pedro Juan es el hermano más grande y Pedro Por qué se rellenó esto porque hicimos un getter si desde el losamos a saludar Hola Pedro o sea Juan lo saluda a Pedro Entonces vamos a poner toque Hola Juan sí Y acá Juan le va a preguntar cómo está tu hijo sí acá podemos hacer un montón de cosas más No es cierto ahora la idea un poco Esto es para que ustedes vean que que hay una comunicación a través del servicio de los dos de los dos componentes si ustedes se preguntan Cuál fue la comunicación es esta voy a borrar un poquito por las dudas pongo saludar y dice hola Pedro este Pedro no está dentro de de de este componente Y si pongo acá Hola Juan este Juan sí viene desde acá yo lo sé en este fíjense que se setea en el que dice padre acá sí set hermano grande Juan y acá se dice en el en el hermano chico yce es hermano pequeño Pedro O sea que lo que seteos en un componente lo estamos leyendo en el otro Sí claramente estamos utilizando un servicio Como pivot de información pero no solamente información sino que también estamos proporcionando métodos y otro tipo de cosas más sí Y cómo se hizo a través de la inyección de constructor ahora también se puede inyectar con la palabra inject s que es de la siguiente forma servicio familiar 2 igual inject servicio familiar service si ahora se está pudiendo utilizar esta forma también y se coloca acá también si acá se pone private y se utiliza de la misma forma si si nosotros acá reemplazamos esto así Sí y esto lo comentamos van a ver que va a funcionar de la misma forma Sí sí funciona Exactamente igual esta es la otra forma de inyectar Esta es una forma que vino desde angular 15 por eso es que no la había puesto antes yo pero sepan que también pueden ver eh las inserciones de dependencias de esta forma que simplemente en vez de utilizar el constructor se hace directamente así Sí bueno esto Me parece que ha sido suficiente para esta sección ya que hemos visto no solamente servicios sino también inserción de dependencias Así que vamos a la siguiente sección vamos a ver en esta sección directivas vamos a ver primero principal Qué significan y Cómo se arman y vamos a ver alguna customizada pero durante el curso vamos a ir viendo un montón más ya que las directivas son muchísimas y después tienen otros nombres también como por ejemplo estructuras de control etcétera que también son subcategoría de directivas en principio vamos a ver qué es una directiva y vamos a ver cómo crear una para arrancar entendiendo Qué significa las directivas son instrucciones en el marcado html que proporcionan funcionalidad adicional a los elementos del dom existentes o personalizan su comportamiento las directivas son un componente clave en la construcción de aplicaciones web en angular ya que permiten extender y manipular el don de manera declarativa lo que facilita la creación de interfaces de usuarios dinámicas e interactivas angular proporciona varias directivas incorporadas y también permite la creación de directivas personalizadas estas directivas incorporadas que yo Les comento son muchísimas y las vamos a ir viendo de a poquito en el curso sí lo importante es que entiendan Qué es una directiva para que cuando yo Después muestre lo otro digan Ah este es un tipo de directiva Este es otro tipo de directiva en esta sección puntualmente vamos a ver una particular que es la customizada una que vamos a armar nosotros para ver más o menos para entender para qué sirven sí como dice acá entonces instrucciones html o sea van puestas en la html extienden o personalizan los elementos se le dan más funcionalidad directivas incorporadas ofrecen funcionalidad predefinida que son estas que yo le digo que angular trae de forma nativa directivas estructurales manipulan la estructura del dom que pueden ser condicionales o bucles ya vamos a verlo directivas de atributos cambian atributos y propiedades directivas de eventos capturen y responden a eventos de usuario ya hemos visto esas las dos tanto de atributos como eventos hemos visto Listo ya vamos a ver ya se van a dar cuenta directivas personalizadas vamos a hacer una vamos a crear una hora justamente una personalizada inyección de dependencias acceso a servicios y datos y flexibilidad de aplicación se pueden aplicar como atributos o elementos ya vamos a ver todo esto no se preocupen Cómo se genera una directiva eh pero de personalizada ojo Cómo se genera una directiva personalizada porque las otras directivas ya están Ya están expuestas no hace falta crearlas se hace con ng gd eh nombre de la directiva o ng generate directive y nombre de la directiva sí Y como podemos ver se va a ver de la siguiente forma se pone un decorador directive para que sepamos que es un una un archivo typescript de que que es una directiva y fíjense que tiene un constructor en el cual podemos por ejemplo poner Element ref que es la referencia al elemento html y acá va a cambiarle el estilo por un background Yellow por ejemplo Entonces si le ponemos eh app mi directiva eh todo lo que tenga esa directiva se va a poner de color amarillo de fondo Sí muy simpático muy fácil vamos a probarla ahora para que ustedes entiendan un poco de qué puede tratar esto y qué en qué se puede utilizar por ejemplo una directiva customizada eh pero seguramente la que más vamos a utilizar durante el curso van a ser las directivas que ya trae angular de por sí Cómo llamar una directiva se pone básicamente al lado del tag de de html y se pone acá fíjense que esto coincide con esto selector app me activa Y dónde se pone al lado del tag de html App directiva entonces Este es un elemento con m directiva personalizada se va a poner de color amarillo por qué porque acá dice disel que es el elemento no punto native Element Style background color que esto es para asignarle un color utilizando el objeto del dom igual yelo entonces claramente Esto va a tener color amarillo ahora lo vamos a probar en código vamos a poner acá vamos poner Clear para limpiar un poquito vamos a poner ng generate directive sí Y acá vamos a poner por ejemplo estilo estilo hermanos sí estilo hermanos para que los hermanos tengan un estilo particular Sí vamos a poner ahí y fíjense que la directiva también trae este Spec para poder hacer el testing lo vamos a borrar y acá tenemos estilo hermanos directive para poder utilizar eh la directiva Sí vamos a a volver a levantar la aplicación ponemos npm Start cerramos acá cerramos acá y ya tenemos la la directiva acá vamos a inyectar en el constructor la referencia al elemento si vamos a poner entonces private Element dos puntos Element ref sí Element ref también viene de angular cor si perfecto y este Element ref nos va a permitir que donde se ponga la directiva poder hacerle aplicarle cambios Entonces vamos a poner por ejemplo dis punto Element Mira acá me está ofreciendo copilot eh Que nos ponga eh background color red Sí pero red es un poco fuerte Vamos a ponerle Vamos a ponerle Green Perdón Esto va dentro del constructor sí Esto va dentro del constructor perfecto guardamos y ya está Entonces tenemos app estilo hermanos lo que hay que hacer es simplemente eh llevarlo a los hermanos por ejemplo vamos al padre acá en el html y acá en el h1 le ponemos app estilo hermanos y lo mismo en el hermano ponemos h1 estilo hermanos Entonces si bien el ccs no tiene ningún en ningún lado el background color Green van a ver que esta directiva hace eso a ver la directiva puede hacer un montón de cosas no solamente poner estilo puede ocultar si no tiene permisos que eso se utilizan mucho las directivas para los permisos entonces vos podés mandar a la directiva adentro eh un un permiso y que chequee a ver si está dentro de la cantidad de permisos que tiene el usuario se pueden hacer un montón de cosas pero puntualmente ahora vamos vamos a ver un ejemplo sencillo como este vamos a ir entonces al código y vemos que tiene el background color en ambos vamos utilizarlo para un montón de cosas más pero puntualmente acá es un ejemplo muy básico muy fácil si ponemos Yellow lo mismo Sí por ejemplo si nosotros en vez de hacer algo tan tan exagerado como un background color quisiéramos que sea una directivo de capitalización O sea que todo lo que est con esta directiva se capitalice podemos poner text transform transform y acá le pondríamos capitalize sí guardamos y vemos que dice Juan y Pedro pero si nosotros le cambiáramos acá en vez de Juan pusiéramos Juan en minúscula sí y acá lo mismo Pedro en minúscula guardamos ven que sigue apareciendo capitalizado porque le estamos haciendo una directiva personalizada que capitaliza sí la directiva esta lo que está haciendo es hacer un text transf capitalize entonces básicamente acá estamos utilizando ap estilo hermanos que es una capitalización de los títulos y esto también se puede utilizar y es muy útil Sí yo para mostrarle algún ejemplo un poquito más útil porque la verdad que er el background color Yellow que había utilizado de ejemplo original me parece un poco eh Bueno un poco gracioso pero en realidad no creo que se utilice tanto en la realidad no salvo que justo querramos eho que que se destaque por algún otro motivo y Bueno creo que esto ha sido suficiente para directivas ya vamos a ir siguiendo eh seguir viendo directivas básicamente todo lo que se escriba al lado de los tags son directivas Sí y ya vamos a ir viendo distintas eh subdivisiones de la misma Vamos a la siguiente sección en esta sección vamos a ver pipes al igual que directivas vamos a ver una parte chiquita de pipes para poder entenderlo y luego durante el curso vamos a ver cómo más utilizar esta increíble herramienta PS es una característica que permite formatear y transform formar datos en la vista de una aplicación web de manera sencilla y legible los pipes son funciones que toman un valor de entrada como una cadena de texto un número o un objeto y lo procesan para proporcionar una representación modificada o formateada en la interfaz de usuario los pipes se utilizan en las plantillas html de angular y se aplican utilizando el símbolo de barra vertical sí que es la tubería el Pipe algunos ejemplos comunes de uso de pipes incluyen formateo de fecha números monedas texto mayúscula minúscula entre otros angular proporciona una serie de pipes integrados como Data Pipe apper Case Pipe lower Case Pipe currency Pipe decimal Pipe percent Pipe entre otros además también puedes crear tus propios pipes personalizados cuando necesites realizar transformaciones específicas entonces formateo de datos eh que transforma los datos para presentarlo de otra forma sintaxis de Pipe se utiliza con la tubería Pipe integrado ya trae angular varios integrados predefinidos pipes Encadenados Así que puedo usar varios al mismo tiempo personalizados que eso lo que vamos a ver un poquito ahora y parámetros de pipes o sea vos le puedes pasar parámetros para que el Pipe funcione de una forma u otra dependiendo lo que necesites y e inmutabilidad Qué significa esto que si bien el Pipe te transforma la vista Por ejemplo si vos mandas un texto todo minúscula y lo podes capitalizar no no modifique el dato original esto es muy muy importante no modifica el dato original pero vos lo ves modificado para que sea una buena experiencia para el usuario Cómo se genera un Pipe con click como la mayoría de las otras cosas ng generate Pipe el nombre del Pipe y sio ng GP nombre del Pipe Ya lo vamos a ver también cómo se ve se ve de la siguiente forma se usa un decorador Pipe O sea que siempre digamos la única diferencia entre todos los typescript es el decorador fíjense o sea todos los typ se ven igual porque son básicamente clases pero utiliza acá el decorador Pipe y además implementa el Pipe transform Si esas son las dos cosas más importantes en este caso por ejemplo este Pipe que es personalizado lo que hace es eh poner todo en mayúscula tu apper cas o sea todo lo pone en mayúscula si bien hay uno que ya viene de angular que hace esta función acá es como para mostrar que se puede utilizar y de hecho vamos a hacer este ejemplo sí Y cómo se aplica se aplica de la siguiente forma se pone el texto por ejemplo la tubería y my Pipe vamos vamos a ver un poquito El ejemplo en código y también vamos a ver un poquito en la documentación de angular Qué otros pipes son los que traen para ir empezando a ver un poquito más Eh Esto de forma divertida y ya vamos a utilizarlo con mucha mayor profundidad quédense tranquilos cuando hagamos práctica sí Entonces vamos a ir un poquito al código acá y vamos a arrancar tratando de hacer un Pipe personalizado para el padre y el hermano en vez de tener esta directiva Sí en vez de tener esta directiva que que te hace capitalizado vamos a poner un Pipe acá que va a hacer que sea todo hacia arriba Vamos a poner mi Pipe personalizado Sí vamos a poner acá personalizado sí de esta forma en este momento llora porque claramente no lo tenemos no lo estamos utilizando si no lo tenemos Así que hay que crearlo sí esto eh Por el momento lo vamos a borrar Sí para que no no nos haga conflicto lo mismo que acá en el hermano vamos a borrarlo y nos vamos a concentrar en en el Pipe si vamos a poner esto acá también tiki tiki guardamos y los dos tienen el Pipe obviamente sale en rojo porque no está creado para ello vamos a abrir acá la consola vamos a a limpiar acá y vamos a poner ng generate Pipe y vamos a poner mi Pipe personalizado s vamos a poner así vamos aar un segundos y podemos ver que se creó acá el Pipe con el el lo que es la el testing vamos a borrar esto por ahora que no lo vamos a utilizar Pero podemos ver que mi pip personalizado que es el mismo que aparece acá lo que hace es implementa pip transform y recibe un valor y otros argumentos si puntualmente lo que vamos a utilizar acá en este caso va a ser simplemente el valor vamos a poner valor los puntos String sabemos que va a ser un String y va a devolver un String Sí y lo que vamos a retornar es el valor punto tuercas sí Perfecto entonces esto lo que va a hacer el nombre este va aver acá qu es lo que dice dice que puede ser undefined si entonces lo que hay que hacer acá es poner String o undefined y acá poner por ejemplo o vacío si bien entonces si valor existe lo devuelve en mayúscula si no devuelve B sí básicamente eso es lo que estamos diciendo acá vamos a ver si esto te transforma y Ah perdón No lo levantamos y vamos a levantar esto como podemos ver si vamos al módulo sí que esto es muy importante fíjense que el Pipe y la directiva también es tan importantes las declaraciones lo que es la directiva y el Pipe también fueron acá declarados esto lo hizo cuando hicimos el ngg eh generate el ng generate lo hizo de forma automática pero si nosotros lo hiciéramos de forma manual Recuerden que hay que declarar tanto las directivas como los componentes como los pipes porque el módulo engloba todo eso sí bien volv al tema de acá y vamos a ver que Juan está en mayúscula y Pedro está en mayúscula si el Pipe en vez de hacer en mayúscula hica todo en minúscula vamos a poner tu lowercase vamos a guardar fíjense que ahora va a estar todo en minúscula Y si nosotros fuéramos al padre y le pusiéramos cuánto todo en mayúscula guardamos y acá también todo en mayúscula Pedro lo mismo va a salir en minúscula vamos a volver a poner tu uper Case acá me parece que queda mejor y listo acá podemos poner por ejemplo vamos a cerrar un poquito todo para que no sea más fácil vamos a poner Pedro así como estaba antes guardamos y Juan así como estaba antes y claramente se mantiene la mayúscula y fíjense que esto otra cosa muy importante si y pongo saludar Juan saluda Dice Pedro como está escrito esa es la inmutabilidad que yo les comentaba se ven mayúscula sí se veen mayúscula pero se está inmutable el lo que es la la variable se mantiene las variables con el formato original el Pipe muestra algo pero mantiene la variable ahora vamos a tratar de ver en lo que es la Si volvemos al gist que había visto yo que había hecho Yo acá en angular fíjense que nosotros tenemos acá la documentación de angular s y acá en la documentación de angular si vamos a docs podemos ver en los pipes si algunas otras información vamos a poner Pipe Y si ponemos understanding pipes acá tenemos Data Pipe Upper Case Pipe lower Case Pipe currency Pipe decimal Pipe y percent Pipe si que son pipes que vienen Ya de por si con angular Entonces por ejemplo vamos a ver el caso de date si nosotros tenemos nos entregarle un String number y date y digamos sea lo que sea nos va a formatear a lo que necesitemos sí fíjense que en este caso está devolviendo en Estados Unidos digamos en inglés pero eso también se puede configurar en primera instancia vamos a tratar de de que de que funcione de alguna de estas formma Por ejemplo así sí vamos a poner por ejemplo lo siguiente vamos a poner acá en en el padre vamos a poner fecha los puntos date y igual New date si Entonces eso va a ser que sea la fecha de hoy si Pero la fecha de hoy si nosotros agarramos y lo mostramos así ponemos acá por ejemplo h2 fecha de hoy do puntos fecha guardamos fíjense Cómo se ve Oh mira como se ve espantoso esto Esto se ve horrible no queremos que se ve así cómo hacemos para que se vea más lindo Bueno aplicamos un p por Si queremos que se vea así me parece que eso está bueno vamos a poner la palabra short Sí entonces ponemos acá date con minúscula date dos puntos short así sí guardamos Y si vamos a nuestro código vamos a ver que dice fecha de hoy y dice 11 eh de abril perdón eh 4 de noviembre del 2023 y dice son las 7:34 pm sí esto por supuesto está en inglés entonces es eh 4 de noviembre claramente no estamos en el 11 de abril vamos a ir de nuevo a la documentación y también podemos ver que podemos hacer eh formatos customizados Por ejemplo si nosotros vamos acá y ponemos en vez de short ponemos año año año gu barra mes mes día día día día si no me equivoco year va con minúscula perfecto mes si va con mayúscula vamos a poner dos meses Como puse yo dos meses perfecto y día va con minúscula s en principio entiendo que iría Así vamos a probar a ver cómo parece y perfecto dice año mes y día si vamos a tratar de hacer una versión como se como se hace en Argentina que vendría ser día a día mes mes año año año vamos a ver si así funciona guardamos y ahí está 4 de noviembre del 2023 sí perfecto como podemos ver estamos usando un Pipe de fecha vamos a ver qué otro hay s aparte de los de fecha habíamos dicho tu Upper Case to lower Case simplemente esto es muy fácil en vez de poner mi Pipe personalizado podremos poner Upper Case guardamos está en mayúscula utilizando uppercase si ponemos lower Case va a aparecer en minúscula todo s y se va a mantener el formato todavía eso también por más que usemos los pipes de angular aparte de date apper lower Case tenemos currency Pipe si si vamos acá podemos ver que currency nos permite poner distintos tipos de moneda si por ejemplo si nosotros queremos poner 26 centavos tenemos un number acá un number y queremos ponerle algún tipo de de formato podemos hacerlo vamos ver un poquito más abajo Cómo se hace por ejemplo canadiense en este caso acá podos poner car directamente le Pon el signo de peso si necesitamos que sea canadiense pemos Cat por ejemplo vamos a utilizar esto a ver si les parece vamos a ir acá esto lo vamos a dejar así vamos a dejarlo sin nada por el momento pero vamos a fijarnos en la fecha de hoy vamos a poner lo siguiente vamos a poner cuánto cotiza el dólar vamos a poner dólar acá y acá le vamos a poner Entonces currency sí carency perfecto dólar no lo tenemos declarado vamos a declararlo acá vamos a poner dólar va a ser un tipo va a ser un tipo number Ahí está mira y el dólar cuánto cotiza por ejemplo hoy en día debe cotizar 1000 pun 5 No es cierto no sé cuánto cotizar vamos a ponerlo así si vamos de nuevo acá cuánto cotiza el dólar signo este símbolo no estaba fíjense y pone eh 50 si nosotros queremos poner algo particular podemos poner por ejemplo Euro guardamos y vamos a ver que aparece el símbolo de euro Sí y bueno tenemos muchas más personalizaciones que se pueden ver acá ustedes pueden ver la documentación después tenemos decimal Pipe en el caso que querramos tener cierta cantidad de decimales por ejemplo eh queremos que tenga cero decimales Sí o sí cero decimales vamos a hacer lo siguiente por ejemplo vamos a poner H el número pi Mira perfecto Mira Esto me lo recomendó directamente impresionante vamos a poner acá pi perfecto vamos estamos definiendo number number pi con el objeto mat me puede traer pi directamente y pi si nosotros lo lo viéramos va a ser este número gigante Sí 3,14 pero ahora si ponemos que solamente tenga dos decimales fíjense que el Pipe number dice un entero y de dos decimales a dos decimales Entonces sí o sí va a ser dos decimales Sí fíjense entonces que si lo vemos 3,14 sí porque está cortando en el decimal dos perfecto Qué más hay percentage type vamos a ver este es percent type no sé por qué digo percentage no importa y acá Bueno podemos poner mínimo de dígitos máximo de dígitos etcétera sí Y además van a ver que eh multiplica por 100 porque normalmente cuando se usa porcentaje nosotros lo que hacemos Es del 0 al Uno es del 0 al 100 sí Entonces vamos a verlo vamos a poner por ejemplo lo que se le llama factor vamos a poner por ejemp factor dos punt number si igual 0,5 perfecto s y este factor vamos a agarrar ahora vamos a poner h2 el porcentaje es dos puntos vamos a poner entonces factor Pipe y acá vamos a poner percent vamos a guardar y vamos a ver qué tal esto y ver que dice 50% nosotros pasamos 0,5 pero dice 50 por qué Porque del factor 0,5 te multiplica por 100 el Per si bueno estos son los pipes Me parece que ha sido suficiente para esta clase Ya vamos a ver muchísimo más adelante otras cosas que se pueden hacer como por ejemplo buscadores que busquen en tiempo real mientras vos vas escribiendo va ir buscando en tiempo real o sea buenísimo y muchas otras cosas más lo dejamos cortamos esta sección y nos vemos en la siguiente sección vamos ahora con una iciones más importantes del curso y es enrutamiento enrutamiento en angular se refiere a la capacidad de Navegar entre diferentes componentes o vistas de una aplicación web sin recargar la página completa Recuerden que esto ya lo habemos hablado permite crear aplicaciones de una sola página spa single page application donde los cambios en la URL desencadenan la carga de diferentes componentes proporcionando así una experiencia de usuario más fluida y rápida o sea que con la la URL y ciertos cambios va a cambiar la pantalla de forma dinámica gracias al framework de angular sin recargar la página esto es sumamente importante entenderlo Y esto es por lo cual vamos a trabajar en el enrutamiento podemos definir distintas rutas si en este caso dice las rutas definen la correspondencia entre los Ur y los componentes que deben cargarse cuando la URL está activa se configuran en una Ray dentro del módulo de la aplicación entonces vamos a tener en el módulo las rutas y cada una de esas rutas va a apuntar a un componente a una vista distinta van a ser estas pantallas Y aunque apunten a componentes distintos no se va a recargar simplemente el framework angular va a ser el cambio de la pantalla renderizando la nueva vista sin recargar la página Por lo cual va a mantener la consistencia y la información que es lo más importante además al no recargar la página todos los archivos estáticos como imágenes videos etcétera no se van a recargar Y así va consumir muchísima menos eh capacidad el navegador de el dispositivo donde esté ya sea un celular o sea una computadora router outlet guarda alguien se acuerda dónde vimos esto se acuerdan que lo habíamos visto por algún lado bien Esto es muy importante es una directiva router outlet se utiliza en la plantilla para indicar el lugar donde angular va a cargar dinámicamente los componentes asociados a las rutas recuerdan que lo habemos visto en el app component que es el el componente más arriba en en la escala de componentes en la aplicación bien entonces en el router outlet va a ser donde van a girar las pantallas si nosr estamos en inicio va a mostrar el inicio si estamos en contacto va a mostrar contacto Si estamos en algún formulario va a mostrar el formulario Qué quiere decir esto que nosotros podemos poner dentro del componente más grande por ejemplo la barra navegación el footer todo y lo que va a girar va a ser lo que está al medio en el router outlet lo mismo si tenemos módulos una cosa importante de entender es que puede haber rutas en cada uno de los módulos y puede ser que en rutos con distintos router outlets y con distintas rutas dependiendo si estamos más adentro en los módulos en este caso como este curso es inicial vamos a utilizar un solo módulo con las rutas y un solo router outlet para poder hacer la navegación en la single page application sí esto lo vamos a ver en el código en un ratito nada más podemos ver que para poder Navegar hay varias formas la primera es la navegación entre ruta se puede realizar mediante enlaces a por ejemplo lo que es eh el anchor lo que es el link en el html o botones o programáticamente utilizando el servicio router de angular en este caso tenemos un ejemplo en el cual usamos una a que es un link y dice router link ig barra inicio Qué quiere decir esto que este router link es la directiva para poder Navegar usando un link ya vamos a ver que se puede utilizar en botones y si no lo podemos a hacer en el controlador llamando simplemente a un método vamos a verlo también adelante podemos ver que eh También podemos utilizar parámetros en la ruta no solamente la ruta cruda sino que también podemos mandar por ejemplo un ID entonces en el caso que estemos por ejemplo viendo productos y nosotros queremos ver el detalle de un producto podemos mandar el ID por la URL como ruta y aprovecharnos de esa información para mostrar otro componente entonces podemos tener eh un componente productos y si mandamos el ID en el producto la URL va a ser muy parecida pero con el barra y el producto por ejemplo damos de cuenta que está en producto de limpieza si mandamos barra lavandina nos podemos aprovechar para mostrar un componente de detalle productos donde la lavandina que es lo que pasamos como parámetro eh sea el parámetro de búsqueda para poder encontrar ese producto dentro de el resto de los productos Ya lo vamos a ver un poquito más en código lo van a entender un poquito más en profundidad acá como pueden ver dice pat producto ID o sea que estamos pasando el ID de producto componente detalle producto componente no es el mismo componente no es producto component es detalle producto component y Cómo podemos hacer para poder Navegar puntualmente a ese utilizando por ejemplo un link usando routerlink producto y producto pun ID pero ya vamos a ver que también hay otra forma de Navegar hacia allá Bien acá tenemos el router link active esto se utilizaba para poder digamos ponerle la clase activa sí aunque hoy en día no se utiliza tanto esto sino se usa el ng Class para poner la clase activa ya la vamos a ver pero sepan que esta opción existía por Si la ven en algún sitio más bien Legacy pero ya vamos a ver que podemos utilizar de forma mucho más conveniente eh el ng Class que es una directiva propia de angular para poder hacer que el link que esté correcto esté en negrita por ejemplo para que la persona que está navegando sepa dónde está parado Ya lo vamos a ver no se no se preocupen parámetros por la URL esto es muy importante podemos pasar más de un parámetro habíamos dicho ID pero qué pasa si queremos pasar la categoría y el ID porque a lo mejor nosotros necesitamos mucha información de la cual aprovecharnos para poder hacer una una visualización correcta si mandamos una categoría auto A lo mejor queremos Mostrar el fondo rojo si mandamos la categoría por ejemplo eh producto de limpieza queremos Mostrar un fondo azul entonces a lo mejor la categoría podemos utilizarla de cierta forma y el ID de otra por ejemplo categoría de producto de limpieza azul y ID la banda entonces parece el simbolito de la lavandina por ejemplo no estoy dando un ejemplo puede ser el ejemplo que ustedes más les sirva para poder entender este concepto lo que estábamos viendo estaba en el ht1000 en la plantilla ahora vamos a verlo del lado del eh ts del typescript de la clase del controlador Sí vamos a utilizar para poder ver qué es lo que tiene la URL Por ejemplo si nosotros queremos tenemos categoría y ID y queremos capturar la categoría por ejemplo producto de limpieza y el ID lavandina vamos a tener que utilizar activate rad importado de angular router lo vamos a inyectar en el en el constructor y después en el el engine init que es esto que habíamos comentado que es cuando inicia el componente Sí el ciclo de vida de inicio en el componente lo que va a hacer es suscribirse a lo que diga la URL y podemos separar de la de la URL categoría de ID por ejemplo entonces acá iría producto de limpieza y acá la bandina por ejemplo No es cierto con esto vamos a poder leer lo que pasa en la URL entonces la URL le mandamos por ejemplo producto de limpieza hay eh y la bandina y nosotros con esto Cuando hacemos el detalle producto el componente de vista de detalle podemos capturar esa información para poder hacer la vista correspondiente a lo que queremos Mostrar como podemos ver acá acá dice en las rutas producto categoría ID y acá navegaremos de esta forma pondremos barra producto la categoría del ID ya vamos a ver que hay otra forma de Navegar más en las próximas diapositivas Acá está perfecto Esta es otra forma de Navegar esto es muy importante porque nosotros eh en los ejemplos que vamos a hacer vamos a utilizar esta forma sí podemos poner import rot angular router y fíjense que acá no es el mismo el misma importación antes habíamos puesto activate Road que es para ver lo que estamos en la ruta activa y para poder Navegar vamos a utilizar router es otra también se injecta en el constructor pero ponemos dis pun router que es esto que inyectamos punto Navigate y acá iríamos a producto por ejemplo si cuando hagamos click en en algún botón que tenga este método y nos pase el producto navegaría acá el producto ID fíjese que también está pasado por parámetro Por lo cual con esta forma nosotros estaremos yendo al barra producto barra y ahí pondremos la bandina por ejemplo No es cierto vamos a verlo un poquito en código pero para poder verlo en código vamos a hacer una sección intermedia que es Cómo agregar bootstrap en nuestra aplicación angular para poder hacer una barra de navegación hermosa con bootstrap Y de esa forma practicar ya con un con una aplicación web mucho más parecida a a un escenario real y después nos vamos a aprovechar de todas estas cosas que estamos aprendiendo para poder hacer las primeras prácticas Así que nos vemos en la siguiente sección que vamos a aprender a usar bootstrap en angular vamos a comenzar con esta sección que es para poder incorporar bootstrap en nuestra aplicación angular pero para poder hacer un repaso general lo que vamos a hacer es hacer una aplicación nueva desde cero Y aplicarlo desde ahí y después vamos a tratar de hacer la navegación del enrutamiento que aprendimos recién Así que vamos Man tenemos apretado shift click derecho a abrir la ventana de poell aquí y acá vamos a poner entonces ng New y vamos a poner un nuevo nombre de proyecto por ejemplo vamos a poner landing page angular s ponemos enter y vamos a guardar que se cree nuestro nuevo proyecto de angular donde vamos a aplicar bootstrap y vamos a hacer una navegación simple para poder practicar lo que habíamos visto antes si vamos a guardar un poquito vamos a poner que si queremos que el enrutamiento lo agregue vamos a utilizar ccs y ahora s vamos esperar hasta que se creen las carpetas bien ahí ha finalizado ya tenemos nuestra carpeta con todo adentro vamos a abrirlo en visual Studio code vamos a arrastrar esta carpeta acá perfecto y vamos a ver como habemos comentado que tenemos la aplicación de siempre si todo el html pelado etcétera etcétera etcétera por ahora vamos a borrar todo lo que está acá sa El router outlet s vamos a borrar esto vamos a guardar en el cc lo vamos a dejar vacío este lo vamos a borrar recordemos que no lo utilizamos acá las rutas están vacía ya la vamos a utilizar para hacer enrutamiento y en el módulo tenemos declarada p component Y estos dos perfecto bien tenemos acá el icono y todo vacío para poder trabajar primera instancia lo que tenemos que hacer es instalar bootstrap Así que vamos a ir a la página de bootstrap vamos a poner bootstrap y acá podemos poner esta página dice get bootstrap hacemos clic aquí y acá vemos cóm se instala el paquete dentro de nuestra aplicación angular Recuerden que angular corre sobre node Por lo cual podemos utilizar nuestro paquete node package manager instalación de Booster si tocamos copy to clipper porque vamos a utilizar esta línea de código est esta línea de comando perdón y la pegamos acá hacemos enter y vamos a ver que al hacer esto se va a instalar en nuestro package Jason boostrap sí fíjense que acá ya se está agregando y además Cuando hacemos la instalación también se agrega al No modules sí Si vemos acá vamos un poquito más adentro vemos que bootstrap ya está agregado acá y ahora viene algo que yo ya les había comentado Recuerden que para poder utilizar alguna de las librerías en este caso boostrap necesitamos incorporarlas a el angular json Por lo cual si necesitamos usar el ccs y el javascript propio de boostrap tenemos que incorporar acá en el angular Jason vamos a cerrar un poquito para verlo y acá tenemos que poner en el Styles el estilo propio de boostrap y en el Script el Script propio de bootstrap Y de dónde sale sale de acá si bien esto yo lo voy a dejar seguramente en la parte de la descripción del video les voy a mostrar De dónde sale primero para que sepan vamos a no modules bootstrap y acá tenemos dis y tenemos ccs y js nosos tenemos que incorporar es boostrap min este acá le hacemos clic derecho copy relative pth vamos a hacerle doble clic para que se mantenga abierto vamos a ir a nuestro angular Jason sí acá abajo vamos a hacer doble clic para que se mantenga abierto y acá lo vamos a poner abajo de Styles como coma porque es un array y lo ponemos sí como podemos ver esto aparece con otras barras Por lo cual vamos a tener que Modificar un poquito vamos a tener que poner las barras para el otro lado Sí así así y así y ahí tenemos nuestra línea de donde está incorporado guardamos y en scripts hay que hacer lo mismo nada más que hay que buscar el de javascript vamos a irnos nuevamente a cabustra pero vamos a buscar el de js tenemos que encontrar el que dice bootstrap bundle min js Este es el que nosotros tenemos que incorporar clic derecho copy relative pad vamos al angular Jason y lo ponemos en los scripts lo ponemos entre comillas y cambiamos las barras de lado si guardamos y ahora s ya tenemos incorporado el todo boostrap si vamos a probar a ver si funciona vamos a poner acá en la en el componente principal vamos a poner un por ejemplo un botón para saber si si funciona Vamos a ponerle Class btn btn primary primary ponemos acá botón de bootstrap vamos a guardar y vamos a ver si esto funciona vamos a a iniciar nuestro nuestra aplicación poniendo npm Start bootstrap se fija en las clases para ponerle estilos Entonces btn btn primary es un tipo de botón propio de boostrap quieren si quieren que les muestre les muestre un poquito ahora acá vamos a poner que no y vamos a ir a Bo vamos a poner bottom buttom y vamos a poner base Class como podemos poner la clase base es btn pero si queremos el botón azul ponemos btn btn primary Sí entonces podremos copiar esto si no secar es gris suces es verde Danger rojo etcétera Sí para que sepan de dónde saqué esas clases si estas clases funcionan quiere decir que está incorporado de forma correcta nuestro Eh bootstrap sí no solamente se instaló bien en el package Jason como lo podemos ver acá sino que también incorporamos bien el ccs que necesita y el javascript que también necesita Sí vamos a esperar un poquito a que levante y ahí vamos a chequear a ver si está funcionando el botón como podemos ver ahí terminó de compilar vamos a ir un poquito más arriba y dice que está corriendo en el local Host 4200 hacemos control click y ahí podemos ver que está funcionando lo que sí hay que tener mucho cuidado ya que puede ser que acá en el angular Jason hay dos lugares donde se está el Styles eh scripts Hay que poner en el que dice builders acá build builder options y hay que ponerlo acá s si ustedes lo ponen en el otro solamente no va a funcionar lo pueden poner en los dos igual ya que el otro es de testeo si si vamos más abajo acá Este es el de Test sí pero si usted lo ponen solamente en el test no va a funcionar tiene que tien que ponerlo en el test y también en el que dice build para que cuando bilde aparezca Entonces el botón correspondiente Sí ya podemos utilizar entonces para para poder armar nuestra navegación vamos a buscar acá entonces nabar y acá vamos a tener por supuesto una barra de navegación para poder utilizar para navegar como hemos dicho hay distintas barras de navegación como podemos ver Ah este me gusta más fíjense que este es un poquito más sencilla vamos a utilizar esta vamos a copiar acá y vamos a ponerla donde habíamos puesto el otro botón vamos a ir acá app component y vamos a ponerla acá como podemos ver tenemos el router aet abajo Por lo cual la barra de navegación va a estar siempre y lo que va a navegar va a ser lo de abajo Ya lo vamos a ver un poquito más adelante pero lo que quiero mostrarles es Cómo construir una barra de navegación acá arriba como se puede ver y utilizar esto después para poder Navegar entre distintas pantallas sí vamos a ir modificando un poquito en vez de nabar le vamos a poner por ejemplo landing page acá pueden poner el nombre de ustedes si quieren sí le pueden poner por ejemplo ser code como si fuera una página mía Sí también se le puede poner acá un icono para Que aparezca del lado izquierdo ya vamos a verlo un poquito y tenemos home features pricing y disable como pueden ver acá si acá si hacemos click No pasa nada pero ya vamos a ver utilizando lo que habemos dicho de cómo Navegar bien Vamos a borrar el disable que nos no lo queremos y vamos a dejar entonces home vamos a poner acá por ejemplo products o productos y pricing a poner contact en vez de pricing vamos a tener home products Y pricing fíjate que acá dice naing active sí esto quiere decir que esta es la que está activa por eso va a salir negrita Sí si podemos acá si nosotros le camos este active acá guardamos vamos a ver que está más negrita Este sí Entonces eso es lo que vamos a utilizar para poder mostrarle a la persona que está navegando dónde es que está parado Así que recuerden esta clase active después vamos a ver cuando hagamos las estructuras de controles cómo modificarlas Sí por ahora lo voy a borrar Sí y vamos a navegar sin que haya marca para poder eh para que sea un poquito más fácil para ustedes sí voy a borrar Por ahora todo esto y el hrf también ya que el hrf es propio del link pero no queremos que navegue y borrarlo la idea es que no se refresque la página y para eso vamos a utilizar lo que habíamos visto antes en en las diapositivas y bien esto ha sido tod la sección y vamos en la próxima sección a hacer el enrutamiento real vamos a crear tres componentes distintos uno para home uno para products y otro para contact y vamos a navegar entre ellos sin que se recargue la página o utilizando boostrap active rad router y toda la información que les dije antes haciendo nuestra primera landing page sencillita pero la primera al fin o no Así que nos vemos en la siguiente sección en esta sección vamos a ver cómo navegar por primera vez así que lo primero que vamos a hacer es crear tres componentes uno de Home uno de products y otro de contact y en en esos tres componentes vamos a hacer aunque sea un titulo para poder Navegar y después por supuesto vamos a hacer una construcción de cada una de de las páginas para que sea un poco más interactivo pero en principio vamos a crear esto para poder hacer esto vamos a ir al código vamos a tirar por ahora la compilación vamos a poner Clear vamos a cerrar estos por ahora vamos a chequear todo y vamos a crear tres componentes si ng generate component y vamos a poner por ejemplo home perfecto ya está ng generate component products esperamos un poquito en generate component contact contact Y también voy a crear uno de detalle produ Enton produy product detail para que podamos hacer más adelante enrutamiento este ID que les había comentado y ponemos ent vamos a ir entonces al módulo y Recuerden que en el módulo habí enrutador p routing modu acá donde vamos a poner las rutas dónde se ponen en este array vamos a abrirlo y cada ruta va a ser un objeto sí Entonces vamos a poner vamos a abrir y cerrar llaves para poder hacer el objeto y fíjense que acá ya me está ofreciendo Cómo hacer para poder llamar a un módulo yo la verdad que no quiero llamar a un módulo y menos de Héroes pero les quiero mostrar qué es lo que hay que poner acá dentro para saber qué es lo que hay que poner acá dentro podemos poner control click a routes sí acá y acá routs dice que es un tipo de dato que es una raay de rutas y que es una ruta vamos a hacer control click y es una interface y qué es lo que requiere una ruta requiere título pat que esto es lo muy esto es muy importante esto lo vamos a utilizar el p es un String que sirve para poner dónde vamos a a estar eh dirigiéndonos ent vamos a agregar p p Entonces es uno que es el camino en inglés y acá donde vamos a poner por ejemplo home vamos a por ahora poner una coma vamos a poner Entonces los tres que habamos dicho o cuatro Mejor dicho porque va a ser products habíamos dicho otro que es products barra product ID y por último contact si fíjense que cuando vamos a pasar un parámetro se pone dos puntos y el nombre si no se olviden de esto si dos puntos y el nombre product ID si esto Recuerden que después lo vamos a tener que utilizar cuando emos usando la AC ya tenemos los pads si esto Recuerden que estaba acá y qué más necesitamos acá podemos ver p match para que sea full o no matcher y tenemos component para relacionarlo con un component Entonces vamos a hacer eso poner coma component y lo vamos a relacionar como hemos dicho al componente que corresponda en este caso va a ser home lo mismo vamos a hacer acá con produ component do puntos produ component perfecto vamos a importarlo acá necesitamos hacer otra cosa Y acá es lo que yo les comentaba fíjense que cuando tenemos un ID no queremos ir al al componente productos queremos ir al detalle del producto ser uno solo uno solo entonces a poner component dos puntos y vamos a poner product detail component Ahí está perfecto y por último el contact era component dos puntos contact component perfecto y Acá hay uno más que les quiero mostrar que es el siguiente redirect to Entonces vamos a poner si el p dos puntos es cualquier cosa sí ponemos redirect to home perfecto a mí me gustó también podremos hacer que home no sea vacío simplemente así me parece que también podría andar bien Vamos a hacer así mejor vamos a poner guardar entonces de esta forma eh si está vacío va a ser home y cualquier cosa si escribimos cualquier cosa redirigir vacío me parece mejor que ponerle home es mejor poner vacío para que quede la URL plana sí vamos a ir probando esto a ver si funciona vamos a ir nuevamente a nuestra navegación y acá recuerden Cómo tenemos que hacer Tenemos que poner router link sí Y acá poner por ejemplo dejar vacío porque este va a ser vacío acá tenemos que poner router link products y acá router link contact si no me equivoco era así vamos a ver si vamos a levantar esto de nuevo y vamos a ver si ya está navegando Esto sí ahí levantó perfecto acá dice homeworks si tocamos products dice product works Y si tocamos contact dice contact works está navegando como hemos dicho y fíjense que además llena acá esto es vacío acá es barra products acá es barra contact Y si ponemos products barra cualquier cosa fíjense que dice product detail works si bien no tenemos una navegación ya estamos viendo que funciona de forma correcta sí cces vacío y contact y no Se está actualizando la página Sí nosotros estamos navegando como una single page application no Se está actualizando que era lo que queríamos Así que básicamente ahora tenemos Cómo podemos ver la navegación de forma correcta Ahora la idea va a ser utilizar este product ID pero para ello vamos a mejor hacer algún tipo de tabla acá donde podamos ver una serie de cantidad de productos y Navegar hacia uno de esos productos pero eso me parece mucho mejor en la siguiente sección el ejercicio que vamos a hacer ahora nos va a servir después para ver una de las estructuras de control más utilizadas en angular que va a ser una tabla donde va a ver distintos elementos en principio nosotros lo que vamos a hacer es verlo de forma estática ahora y luego lo vamos a poder ver de forma dinámica utilizando una estructura de control vamos a comenzar lo primero principal necesitamos una tabla Así que vamos a buscar una tabla en bootstrap y acá tenemos una por ejemplo no vamos a copiar esta que es una tabla que normal com unic corriente y la vamos a poner en productos para poder hacer la navegación al barra ID y de esa forma aprovechar toda esta información que habíamos visto en la sección de enrutamiento para poder también ver esa parte bien como había comentado vamos a hacerlo de forma estática ahora y después lo haremos de forma dinámica en productos vamos a ir al html y vamos a pegar la tabla si guardamos Acá está la tabla sí la idea va a ser poner por ejemplo productos de limpieza como hemos visto Me parece que está bueno poner un h1 productos de limpieza también lo podemos poner en inglés en principio voy poner poniéndolo así de esta forma y vamos a poner acá por ejemplo producto precio y v poner acá detalle no vamos a tener producto precio y detalle ahora vamos a lenar un poquito esto en el un vamos a poner ejemplo la bandina va a salir por ejemplo 10 y vamos a poner acá en el detalle un botón botom y vamos a poner la Class btn btn y ahora vamos a ver qué botón podemos poner vamos a buscar algún botón lindo estos botones tamb bien pero quiero un botón estos este quiero este vamos a poner btn btn outline primary si vamos a poner este parece que está buenísimo y en vez de poner por ejemplo detalle No ya vamos a ver para qué estoy poniendo este botón Bueno vamos a copiar esto vamos a copiar esto para para tenerlo igual en los en las otras dos filas sí guardamos y acá en vez de la bandina poner por ejemplo detergente va a salir 5 y acá vamos borrarlo por ahora para dejarlo más plano perfecto y acá vamos a poner por ejemplo limpiavidrio y vamos a ponerle 7 si vamos a guardar y vamos a ir viendo acá cómo va quedando perfecto perfecto como podemos ver tenemos tres detalles s y la bandina detergente y limpiavidrios ahora qué queremos hacer queremos que en el detalle navegue si a barra y y un ID para que vaya por ejemplo si ponemos acá la bandina la bandina vamos a ir al detalle y vamos a poder consumir la bandina para ponerla acá sí entonces La idea es que cuando toquemos alguno de estos tres botones naveguemos a Barra products barra y el lo que se llame Sí para ello habíamos visto entonces que había dos formas una era poniendo eh router link sí que era así router link y acá hemos puesto entonces entre corchetes sí Y acá ponemos otros corchetes y en la primera parte ponemos producto que ahí va a ser donde va a navegar o product coma y acá va a ser por ejemplo la bandina no la bandina esto no tenemos por ahora algo Dinámico Ya lo vamos a hacer Dinámico esto lo estamos haciendo por ahora estático Pero esto después lo vamos a hacer Dinámico sí vamos a copiar esto por ahora sí copiar esto acá tiki y tiki y acá vamos a poner por ejemplo detergente vamos ponerlo con mayúscula no y a este en vez de la bandina vamos a poner limpia vidri Sí perdón acá es products products products products y además nos faltaba la barra acá Acá hay que poner una barra sí Y ahora sí guardamos la bandina de detergente limpi vidrio si tocamos acá va a decir la bandina si tocamos acá decimos detergente Y si tocamos acá va a decir limpia vidrios ahora queremos consumir esto para que acá lo muestre sí Entonces vamos a ir al product detail al otro componente y vamos a hacer esto que habíamos comentado acá dentro tenemos que inyectar el activate rad Y de esa forma poder consumir lo que nos trae la URL vamos a hacerlo primero principal tenemos que implementar oninit para lo que traiga eh poder utilizarlo vamos a poner un un constructor acá vamos a poner prate Road vamos a poner en bajo ro así tenemos la nomenclatura correcta y vamos a poner activate activity ro perfecto y abrimos y cerramos llaves y enit vamos poner dis punto Road params subscribe AC poner params como dice acá y en principio vamos a poner Me parece bien hacer un conso log para ver cómo va punto y com guardamos vamos a ir haciendo eso si vamos a poner acá entonces abrir la consola con el usando inspeccionar o con con el f12 Y si tocamos acá dice undefined porque me parece que acá pusimos ID y no es ID habíamos dicho que era product ID si tenemos que poner este nombre me había olvidado yo puse ID pero es product ID si vamos a ver ahora dice detergente ahí está funcionando fíjense Así que vamos a volver vamos a abrir un poquito esto para que no me agarre Ahí está perfecto me estaba agarrando la barra chicada fíjense que esto es responsive y aparecería acá products Sí pero bueno La idea es no utilizar el responsible en este momento Y si tocamos la bandina por ejemplo aparece la bandina Y si tocamos acá limpi vi se dice limpi vidrios ahora lo que queremos hacer eso es y poder mostrarlo acá Entonces vamos a hacer lo siguiente en vez de un conso vamos a definir acá una variable por ejemplo producto s vamos a poner String vamos a empezar vacío vamos sacar el pregunta estamos empezando vacío y acá en vez de hacer un cons lo que vamos a hacer es igualarlo dis producto igual param product ID creo que es así perfecto vamos a ver entonces de ponerlo acá en el html vamos poner aquí verás el detalle del producto dos puntos y vamos a abrir y cerrar y poner acá entonces producto y como podemos ver Si volvemos acá limpiavidrios si nosotros ponemos lavandina dice lavandina si Nosotros acabamos detergente dice detergente Entonces es el mismo componente pero que está funcionando de forma dinámica porque recibe a través de la URL el product ID Entonces ven como con la URL yo puedo armar una pantalla distinta con un solo componente yo puedo mostrar cosas distintas Es más si nosotros por ejemplo le pasáramos la categoría como hemos dicho podemos por ejemplo hasta poner otra cosa vamos a tratar de hacerlo vamos a ir nuevamente acá al product y además de pasarle detergente vamos a pasarle por ejemplo el color que queremos que se vea de fondo por ejemplo no como para para hacer algo más vamos a poner enos tres vamos a agregar por ejemplo red coma y este vamos a poner Yellow por ejemplo Yellow y este le vamos a poner Green y lo que tenemos que hacer es agregar entonces la la sección categoría para eso vamos a ir a routing y acá también vamos a poner dos puntos categoría o category porque estamos haciendo en inglés esta parte barra Entonces ahora tenemos category y product ID Sí entonces guardamos y ahora tenemos como podemos ver products category y el tipo de de producto el nombre del producto entonces volvemos a producto detail sí Y acá podemos poner por ejemplo color s ponemos String igual Perdón vacío y acá ponemos color discolor params y habíamos dicho categoría no categoría Perfecto entonces acá en color tenemos categor y lo que podemos hacer acá si vamos al html del producto acá podríamos por ejemplo poner que no me quería adelantar Pero bueno vamos a tener que utilizar algo algo que todavía no vimos pero me voy a adelantar un poquito pero va a ser lo único que vamos a ver que es el y vamos a poner por ejemplo color dos puntos color que es el color que está afuera entonces background color background color vamos a poner color si vamos a probar a si funciona la bandina está en rojo detergente está en amarillo y limpi vi está en verde lo que hace este ng Style es aplicar un color dependiendo de lo que llegue como está llegando verde si es limpio vidrios amarillo si es detergente y rojo si es la bandina porque lo estamos mandando acá en products fíjense red Yellow y Green lo está recuperando si cuando hacemos acá el params como category y lo está sando en discolor Y de esa forma es que se ve De todas formas est es un ejemplo un poco pavo y un poco poco Dinámico Porque si bien Esto es Dinámico eh lo que estamos Armando en el detalle en la parte de productos es muy estático así que ya vamos a ver ahora estructura de control con lo cual vamos a poder ver cómo hacer todo esto mucho más Dinámico que es justamente para lo que usamos un framework para que todo sea Dinámico y todo se construya de forma eh reactiva Así que nos vemos en la siguiente sección que ahí se va a poner mucho más lindo con estructuras de control vamos a una sección increíble vamos a hacer toda la pantalla super dinámica vamos a ver estructuras de control y qué son las estructuras de control vamos a leerlo desde aquí dice las estructuras de control son herramientas que te permiten manipular el flujo de ejecución en tu aplicación y vamos a ver varias la primera es ng If como pueden ver If es si en inglés es un condicional permite Mostrar u ocultar un elemento en función de una expresión boleana o sea si ponemos en gif Mostrar elemento si esto fuera true se muestra si es false no se muestra también se pueden hacer eh expresiones un poco más complejas con Como por ejemplo si esto y esto esto o esto etcétera sí básicamente contenido visible si Mostrar el elemento es true si no no ng4 este es muy importante es un bucle como el bucle for de javascript pero nada más que para estructuras de angular utilizado para iterar sobre una lista y renderizar elementos repetitivos Entonces si tenemos una lista eh desordenada Como podemos ver acá podemos hacer que cada uno de los elementos le aparezca de forma interada escribiendo una sola línea de código entonces con una sola línea de código podemos hacer poquitos muchos o miles Por ejemplo si nosos subiéramos una lista de 1000 productos vamos a poder Mostrar los 1000 productos con una sola línea de código entonces Esto está buenísimo ya vamos a ver cómo utilizarlo también eng switch en este caso nos va a servir para poder usar condicionalmente distintas formas dice Mostrar un bloque de contenido según el valor de un expresión Entonces pasamos acá a la opción si coincide con la opción uno se muestra este si coincide con la opción dos muestre y hay un default Por ejemplo si nosotros tuviéramos que Mostrar rojo verde blanco o amarillo y por default negro Entonces podremos ver si viene rojo se muestra rojo si Entonces tenemos varias opciones no es un ngif que es true o false ni es un bucle sino que es un ng switch que nos permite Mostrar varios tipos de eh estructuras distintas dependiendo una expresión si no una buana sino una expresión que puede ser por ejemplo igualar con un String Sí en G Class Esta es importantísima que básicamente es una estructura que te permite cambiar dinámicamente las clases de un elemento Y esta es una de las cosas que vamos a utilizar por ejemplo cuando queremos poner en negrita los menúes bien Si nosotros quisieramos poner en negrita los menúes podemos utilizar el ng Class y comparar dónde estamos parados con eh el menú que ofrece Entonces si es correspondiente se mostrará en negrita entonces Esta es una de tantas opciones No es cierto básicamente ponemos una condición Que también sigue siendo un bulano acá otra y eh se aplicaría la clase si es true Entonces por ejemplo si coincide con cierta cosa true Entonces se muestra la clase uno sí esto es parecido a en Style que es el que sigue pero no es igual porque en este caso ponemos un String por ejemplo con color que corresponde a un estilo propio de ccs y acá no le pasamos un true o un false igual que acá sino que le pasamos el valor final la diferencia sería en en Class pasamos true y false en la condición y en el en Style le pasamos directamente el color que queremos porlo rojo verde amarillo azul y acá 0,5 1 2 3 sí es le estamos pasando directamente el valor final en String de lo que quiere tener por eso esa es la gran diferencia entre ng Style y ng Class sí ng container es una estructura también importantísima ya que todas estas estructuras que les mostré antes que es en If en4 en eh Class en Style no pueden estar las dos en el mismo tag de html Sí tienen que estar en distintos tags de html entonces con el en container podemos hacer un contenedor que tenga una de estas Entonces es una estructura de control que no afecta al dom dicho es paso no aparece ni siquiera Cuando hacemos la inspección en el dom y se utiliza para agrupar elementos sin agregar nodos adicionales del árbol dom entonces claramente podemos usar un ngif eh afuera y un enif fuera adentro y de esa forma puer utilizar dos estructuras control sin interferir en las estructuras del Don no hay que poner un div o un eh una división un spam para poder ir dividiendo el código div div div div div todas esas divisiones de div hay que tratar de evitarlas y con el eng container lo podemos hacer ya que esto no aparecerá eh en el dom Esto es algo muy parecido al fragment de react si alguien viene de react Sí y Acá hay otras estructuras más como por ejemplo ng template plural y compon que no vamos a ver en este curso pero sepan que existen también Sí vamos a poner un poco manos a la obra vamos a sacar esto de acá y vamos a ir viendo un poquito como utilizar esto en lo que teníamos acá en el código pero no vamos a hacer en orden primero principal vamos a crear un mooc y usted me preguntarán Qué es un mooc un mooc es una estructura de datos falsos para poder utilizarlo para poder hacer una una página web de muestra en este caso vamos a moquear productos de tal forma de poder usar un ng4 y hacer una itera los productos y poder mostrarlo de forma dinámica vamos a verlo primo principal vamos a ir acá productos y vamos a generar un un archivo llamado products moc ts sí Y acá vamos a exportar una constante llamada products list o products array como querramos y vamos a hacer justamente un array de productos acá podemos tipar Sí vamos a ponerle en principio Any pero después lo vamos a tipar También acá abajo Sí después le vamos a poner un export interface product y acá vamos a ver cómo lo hacemos con esto mismo para que pueda aparecer acá un producto s Ya lo vamos a ver vamos a ir guardando por esto ahora y vamos a hacer lo que habemos hecho en la pantalla vamos a ir acá y pemos ver que los productos son la bandina detergente y limpio vidrios pero vamos a poner algunos más si habemos dicho la bandina un la bandina 10 sí Entonces vamos a poner acá un objeto que diga entonces ID 1 coma nombre o name vamos poner name en inglés Me parece que está mejor name a poner la bandina coma y hemos puesto price si le hemos puesto por ejemplo 10 pesos pero vamos a ponerle 10 así lo podos utilizar A lo mejor un Pipe y para seguir aprendiendo un poquito más Esto me parece que es más que suficiente vamos a poner una coma y hacer varios vamos a poner 2 3 4 5 y acá vamos a poner como hos dicho detergente acá vamos a poner limpi vidrios acá vamos a poner por ejemplo quita grasa y por ejemplo perfumina no listo tenemos ahí productos vamos a poner acá 5 7 8 dos sí a poner en dólares para que no tenga un número así si vos Viví en Argentina seguramente sería un número gigante no es la idea bien y aparte vamos a poner una descripción Me parece que sería lo ideal porer una descripción para poder hacer algo distinto en la en la otra pantalla Sí vamos a poner descripción description description y vamos a poner por ejemplo botella de 1 lro este a poner dura 120 lavados eh tus vidrios transparentes cocina tranquilo nosotros limpiamos y acá perfumina por ejemplo el olor a campo más real lista es yo como para poner algo No es cierto bien ahí tenemos nuestro product list y ahora lo que tenemos que hacer es la interfaz de esto ya que está vacía tenemos ID vamos a poner entonces ID que es un number vamos a poner entonces eh name que es un String Uh Perdón name que es un String price que es un number y description que es un String acá en ID vamos a poner que es un number y también puede ser un String recordemos que podemos ponerlo así perfecto tenemos ID name Price description Y por qué acá ahora Ah porque esto en realidad es un array de producto perfecto vamos a comar un poquito el código guardamos y ya tenemos entonces una aray de productos Y esta es la interfaz de productos Sí bueno vamos a incorporarlo a productos entonces en vez de tenerlo de esta forma vamos a traerlo acá vamos a importarlo Sí si les parece vamos a poner acá prod list Y es de me equivoco Ahí está product Ahí va guardamos Y tenemos product list perfecto y lo que hay que hacer ahora es hacer una una un atributo que se llame products por ejemplo product o product lck también se puede llamar Igual igual esto no hay ningún problema igual a product Sí y de esta forma ya tenemos disponible la variable nuestra entonces agarramos esto y lo podemos utilizar acá Cómo se utiliza tenemos ahora en este caso tres productos como duplicados entonces o triplicados en este caso vamos a borrar y vamos a dejar uno solo y lo que queremos que se repita es el TR claramente si nosotros vemos acá qué es lo que se repetia el TR el TR entero sí el T Row ser cada una de las filas entonces en principio vamos a poner el TR vamos a poner acá Entonces ng4 sí Y acá vamos a poner el nombre de la lista que es product list y cada em va a ser un producto pero le vamos a poner producto product sea sería Let product de product list entonces cada uno de estos va a ser una iteración del producto Por lo cual el primero va a ser este el segundo va a ser este el tercero va a ser este etcétera entonces con una sola línea que va a ser esta o sea una sola estructura vamos vamos aar cinco estructuras que son las cinco que tiene claramente el el mooc que hicimos Sí vamos a poner en vez de uno acá en vez de ponerle uno Qué vamos a hacer V a poner vamos a poner una interpolación de datos vamos a poner product sí punto ID entienden y este Cómo va a ser producto o product Perdón punto name y este que va a ser product pun price pero recordemos que necesitemos ponerle un Pipe de currency porque si no va a venir entonces ponemos acá currency sí guarda Ah y acá en name también podríamos poner eh que sea por ejemplo apper Case o lo que sea o podemos hacer un capitalizado como hemos hecho nosotros se acuerda que habemos hecho un Pipe personalizado podremos hacerlo también en primera instancia Esto está más que bien Vamos a ver cómo se está viendo y se está viendo de forma correcta la descripción no la pusimos Sí ahora cada botón de estos yo no quiero que siempre vaya red y la bandina primero principal vamos a sacarlo de la categoría sí por ahora vamos a sacarlo si le parece vamos a a borrarlo de todos lados vamos a dejar solamente product ID si vamos a a product el también vamos a borrarlo de acá del color acá vamos a borrar color y acá en el html también vamos a borrar Esto sí guardamos en todos lados Sí y nos quedamos entonces acá vamos a cerrar todo por ahora para que nos sea un poquito más fácil y ahí está perfecto si nosotros queremos que haga un router link pero no queremos que pero queremos que vaya products y el product ID entonces acá tenemos dos opciones uno es poner acá sin comillas product ID Sí vamos a guardar y vamos a probar tiki y estamos siendo a uno sí tiki estamos siendo dos ahora si nosotros queremos que mande el name ponemos name acá guardamos y sería detergente quita grasa etcétera pero nosotros Mejor queremos que mande el ID y el ID nosotros vamos a utilizarlo para poder Mostrar más información en el otro componente cómo vamos a hacer vamos a hacer algo muy importante ahora Así que quiero que estén muy atentos esto que les voy a mostrar es muy muy importante Así que ojo con esto Esto si bien es javascript puro lo que voy a hacer estén atentos porque esto se utiliza muchísimo vamos a importar en el product detail vamos a también estar importando lista de productos product list igual product arr igual y vamos a traer entonces product list product list de prod entonces acá Tenemos también disponible el product list ahora si nosotros quisiéramos Mostrar acá más información lo que tenemos que hacer es agarrar este product ID y tra todo el objeto o sea traernos toda la información del objeto que nosotros seleccionemos sí O sea si nos vemos acá el product mo y solamente nos manda el ID el un el dos y el tres o el cuat o el c no nos interesa Yo quiero tener todo el producto sí O sea la bandina que s yo para por ejemplo Mostrar la descripción cómo hacemos eso vamos a hacer lo siguiente en vez del producto ser un String vamos a poner un product y lo vamos a dejar en principio vacío producto Vamos a ponerle product me gusta más así product Entonces tenemos un producto el signo de pregunta ya que va a empezar siendo vacío y acá no queremos que se setee el 1 2 3 4 5 lo que queremos que es cte es el producto entero Entonces cómo hacemos vamos a hacer lo siguiente vamos a poner dis punto product list que es el producto entero punto find si punto find para que nos traiga el objeto entero y acá vamos a poner product que se puede llamar el nombre que quiera product ID como dice acá punto ID igual igual igual pero acá no me gusta esto que puso acá el params ID sino que vamos a poner esto y de esta forma Sí vamos a probar esto a ver si funciona a ver por las dudas repasamos estamos agarrando de la lista El único objeto que coincida el ID con lo que estamos mandando por URL Entonces si mandamos el uno va a decir la banda in price etcétera sí y acá vamos a mostrar por ejemplo product name vamos a ver si funciona esto acá no sé por qu llora Ah esto puede llora porque puede ser andf entonces p un signo pregunta acá s bien Vamos a ver si esto funciona vamos a hacer clic en detergente y fíjense que no está funcionando yo mandé el dos y por algún motivo no está mostrando nada vamos a ver qué es lo que puede haber pasado y esto ya sea A qué se debe se debe que yo le puse tres iguales sí a ver si ustedes se dan cuenta pausen el video ahora y se dan cuenta por qué yo puse tres iguales pero el params ID el product ID está trendo un String y yo el product ID es un number entonces si yo saco uno de estos iguales ahora este Por más que sea este String y este sea number van a poder compararse Recuerden que el tres iguales incluye a que se igual del tipo Entonces si guardamos acá Ahí está perfecto aparece detergente y lo que nos trae es todo el objeto vemos acá la bandina y ya está diciendo la bandina si Entonces el un Este es un String porque estamos pasando por URL la URL es un String Entonces estamos pasando el un lo compara con el un number que tiene acá si y como pusimos dos iguales en vez de tres entiende que aunque Este es un number y este es un String lo va a poder comparar Entonces ya estamos ya está funcionando de forma correcta vamos a hacer algo más acá vamos a poner Entonces por ejemplo product name vamos a poner acá entonces producto dos puntos acá vamos poner h2 precio dos puntos product price h3 vamos a poner por ejemplo descripción do puntos product description description description Y eso era todo no vamos a guardar y vamos a ver si está funcionando perfecto producto la bandina precio 10es Ah Recuerden que esto tiene que ser eh currency Vamos a ponerle acá currency guardamos y ahí apareció perfecto Sí Entonces tenemos producto lavandina precio 10 pesos o $ botella de 1 lro Sí vamos a poner por ejemplo detergente y ahí dice detergente 5 descripción dura 120 lavados quita grasa cocina tranquilo nosotros limpiamos perfumina el olor a campo más realista Sí entonces ahí estamos utilizando varias cosas ya mezcladas ahora vamos a utilizar alguna otra cosa vamos a ver si en el caso del product m por ejemplo el quita grasa lo vamos a mandar sin descripción sin descripción grasa No le vamos a poner nada o Entonces qué pasa acá ya empieza a preguntar Che loco necesit poner la descripción cómo hacemos para que no aparezca le ponemos signo de pregunta entonces la descripción no es obligatoria pero qué pasa si la descripción no está acá va a quedar horrible porque fíjate que si nosotros vamos a quita grasa queda la descripción vacía Entonces nosotros quisiéramos que esta descripción directamente no aparezca cómo hacemos eso vamos a utilizar el ng If vamos a agarrar el el h3 y ponemos ng If Sí y ponemos product punto description Entonces nos preguntamos si existe si no si no viene nul o no viene vacío descripción lo muestra descripción dos puntos y esto si no no muestra directamente todo el h3 vamos a ver si funciona y vemos Que directamente la descripción no no está lo mismo podemos hacer por ejemplo para el loading por ejemplo vieron que esto estamos haciendolo en tiempo real ahora vamos a poner por ejemplo un loading vamos a poner por ejemplo un loading bullan true y vamos a recién a sacarlo cuando termine de cargar Esto entonces todo esto que está acá abajo Lo vamos a poner dentro de un set Time out Sí para darle una demora y vamos a hacer que recién se cargue al segundo y medio sí bien perfecto entonces esto se va a cargar al segundo y medio y acá va a poner dis loading igual false Sí entonces acá vamos a hacer un ng container para ir probando Ya otra estructura más un ng container V a poner esto AC abajo vamos a acomodar un poquito el código y acá vamos a poner un ngif ngif de la negación de loading Recuerden que si pemos un signo de admiración es la negación delio Entonces cuando sea false va a aparecer todo eso pero mientras sea true que va a haer vamos a poner container que va a ha lo contrario sea enif loading sea mientras está cargando qué es lo que va a aparecer va a aparecer porlo cargando información poner por ejemplo en un Que aparezca itálica y lo podemos poner por ejemplo con un Style Blue importa color Blue vamos a probar a ver cargando información y el segundo y medio aparece se entiende que es lo que dice vamos de nuevo Yo acá estoy haciendo que en el inicio demore un segundo y medio en cargar toda esta información y se ponga en false el loading entonces arranca el loading en true Entonces vamos mostando cargando información durante un segundo y medio y cuando se vuelve false esto muestra Esto entonces acá tenemos el ngif que yo le comentaba Y tenemos el en container que les comentaba tenemos Entonces dos contenedores uno con el loading y otro con sin eluding y acá mientras sea true muestra cargando información y cuando es false muestra la información ya cargada y esto que están viendo acá se utiliza muchísimo muchísimo muchísimo ya que el backend no es automático sino que demora Entonces como demora utilicemos un loading Hasta que el backen nos responde Entonces esta estructura que vien acá se utiliza muchísimo muchísimo muchísimo está cargando Hasta que el backet nos responde cuando responde mostramos la información sí tenemos un en giif acá otro en giif acá fíjense que esto no es exactamente un true y un false acá sí acá no es exactamente un true false Pero ven que si es un null o un undefined también funciona como un false sí perfecto nos estaría faltando ng Class y ng Style vamos a ver un poquito eso vamos a hacer lo siguiente vamos a ir nuevamente a productos si le parece y vamos a hacer lo siguiente acá en el moc si el precio es mayor a 5 el precio se va a poner en rojo sí vamos a tratar de hacer esto eso vamos a poner acá en lo que es currency y vamos a poner ng vamos a empezar con ng Class vamos a poner ng Class sí Entonces vamos a poner que va a tener Class red sí vamos a tener Class red vamos a poner así dos puntos Así va a tener Class red si pase una condición y cuál es la condición si product punto price es mayor a 5 E vamos a definir la Class red en el ccs vamos a poner punto red color red vamos a ver si funciona estamos poniendo que va a tomar la clase red acá podría ser rojito no la clase Le ponemos el nombre que dice por ejemplo red color no no no es que estoy poniendo red y ya funciona podemos ponerle como querramos red color Sí y le ponemos una condición acá y en el caso que sea así se va a poner rojo me estaban faltando los corchetes acá en ng Class ponemos los corchetes en Class Y ahí sí ya está apareciendo los colores recuerden entonces que tiene que ng Class entre corchetes Perfecto entonces si el si el producto es mayor a Entonces se aplica como podemos ver el color rojo perfecto ahora vamos a probar con en Style vamos a hacer algo parecido a esto pero dentro de de la del detalle si acá s en este pero usando ng Style vamos a product detail y vamos a hacer lo siguiente vamos a armar una variable que se llame color dos puntos String vacío y vamos poner lo siguiente dis color si dis product Price mayor a 5 entonces red Si no vamos a ponerlo vacío s vamos a poner as number para que nos deje de hacer de salir el el error this product price as number porque puede ser undefined pero bueno acá lo vamos a tomar siempre como un número si es mayor a 5 red y si no nada entonces este discolor lo vamos a aplicar acá vamos a hacer un ng Style en precio sí ng Style sí acá y vamos a poner estilo color y expresión va a ser entonces color que vendría a ser lo que se estaría llenando de esta forma Entonces si es mayor a 5 va a ser red si no no si como podemos ver acá guardamos todo y vemos que el precio es 10 también podremos aplicarlo solamente a a la parte este precio lo podremos sacar si y aplicar solamente acá podemos hacerlo dividiendo esta partecita Pero bueno Me parece que también está Ah si es más de cco por ejemplo este 7 y si es menos pueden ver que no se aplica estamos utilizando el en Style acá que es el color igual color o sea red si no es true o false acá Este dau un Red y en el caso de en el producto estamos utilizando el en Class porque acá sí es true o false y aplica esta clase y este clase que es este css sí ahí hemos aplicado básicamente todas las estructuras de control queem hemos estudiado ng4 ngif ng Style ng Class Y ng container sí la verdad que creo que ha sido una excelente sección Así que cortamos acá y seguimos en la siguiente sección vamos con una sección importantísima formularios y se usa por todos lados un login es un formulario un formulario de contacto es un formulario si el cliente tiene que escribir en un buscador se usa un formulario realmente el formulario está presente en casi todos los lugares donde la persona que está frente a la computadora va a interactuar con tu aplicación web vamos a ver un poquito más allá primero principal hay que ver que hay dos son una parte esencial para interactuar con el usuario y recopilar datos hay dos tipos principales de formularios en angular los basados en plantillas y los reactivos uno lo vimos un poquito por arriba el otro lo vamos a ver a full ahora que es el que más uso yo que es el reactivo Así que ojito eh vamos para ahí los basados en plantilla necesitan importar el forms module sí se importa dentro de la parte de imports en el módulo en el que lo haya que usarlo en este caso lo vamos a importar en el módulo general sí los formularios basados en plantillas utilizan la sintaxis del template del html para construir y validar formularios la directiva ng form se utiliza para crear el formulario y en model para enlazar datos bidireccionalmente vamos ver que el enform se utiliza en el form Sí en el tag form y el enzy model se utiliza con corchetes y paréntesis para ID vuelta justamente con esta variable por ejemplo en este caso las validaciones de require se ponen directamente en el html como podemos ver aquí y el submit que es lo que se va a ejecutar cuando se ejecute el formulario se pone también en el form esto vamos a ver que también pasa en el otro tipo de formulario y obviamente el botón submit está dentro del form sí esto también es muy importante verlo dentro del form Entonces tenemos my form igual en form para poder setear el formulario eng submit que va a ejecutar el formulario acá el engine model que es lo que va a estar enlazando con la variable las validadores dentro del input Y por último el botón submit dentro del tag formulario Sí además también tenemos que tener en cuenta que hay que manejar los errores y cómo se manejan angular gestiona el estado de validación automáticamente se utiliza la propiedad eng model valid para verificar si un campo es válido o no entonces ponemos un ngif y ponemos si no es válido pero está Touch O sea ya alguien entró y salió del formulario y era requir y no hay ninguna información Se pondrá este error nombre es obligatorio Ya lo vamos a ver un poquito más adelante Sí para el caso de formularios reactivos lo que hay que importar es reactive form module acá no no lo act dice la imagen pero básicamente hay que importar reactive form modle para lo que son formularios reactivos form modu es para el formulario de tipo plantilla y reactive for module es para formularios reactivos y bien Cómo se ven los formularios reactivos primero principal hay que decir que se construyen en el componente o sea en la parte del controlador en el typescript utilizando el servicio form builder los controles se definen explícitamente y se vinculan al formulario entonces en vez del html ahora vamos a estar viendo el typescript sí podos ver acá que se importa form builder form Group y validators Y tenemos primero principal en el constructor inyectado el form builder y dentro de las llaves del constructor se declara myform ig dis fb Group O sea primero se declara un grupo de controladores y adentro están de un objeto están los controladores que en este caso son name que empieza vacío y tiene la validación requerido email que empieza vacío tiene validación requerido y validación de tipo mail O sea que el formato tiene que ser tipo mail fíjense que si es uno solo lo puedes poner así Pero si son varios hay que ponerlo dentro de una Ray de validadores sí Entonces tenemos en el constructor inyectado el form builder y hicimos de mi formulario un grupo de controladores y cada una de estas líneas atributo valor o o key value Perdón es un controller Si vemos el html Cómo se relaciona con esto es similar el otro pero tiene algunos cambios primero principal en el form en vez de decir ng form dice form Group y tiene el nombre del grupo acá en este caso se llama my form si se llamara por ejemplo contact form o login form o como se llame lo pondremos acá al este sería el nombre particular sí fíjense que también está el en submit para cuando hagamos submit o sea botor enviar para que se ejecute el formulario tenemos acá ya la primera diferencia primero principal no dice requir acá porque lo pusimos a acá al validador requerido directamente dice form control name igual name que va a estar referido a este form control o sea en vez de poner acá el engine model que que actualice automáticamente la información se pone form control Line que va a ir actualizando estos controladores y los validadores se hacen directamente en el timp Sí pero también podemos ver que hay otra cuestión en común que es el botón submit que está dentro de las etiquetas form si vamos un poquito más adelante también podemos ver que el manejo de errores es un poquito distinto también se pone un ngif pero fíjense que hay que ingresar al objeto propio del formulario haciendo my form que se puede llamar de otra forma se podría llamar contact form o submit form perdón O login form punto get acá ponemos el nombre del controler por ejemplo name en el caso de un login pondríamos user en el caso de un contact podemos poner por ejemplo Eh bueno name email etcétera punto has error y acá el has error está relacionado ad con el tipo de validador en este caso required porque era requerido y acá por ejemplo en el caso del del formato email Sí estas son las diferencias entre nombre obligatorio y correo no válido y acá además te indica que está tocado Sí o sea es has error y tocado O sea que vos entraste y saliste Y en este caso por ejemplo va a estar vacío No es cierto el nombre es obligatorio Y si esto es vacío Sale esto y en el caso de que vos hayas escrito mal el mail va a salir esto por supuesto si es válido no va a tener errores Ya lo vamos a ver un poquito más en código Sí y eso ha sido todo vamos al código vamos a chequear un poquito esto y vamos a ir directamente Entonces al formulario de contacto vamos a ir acá y acá vemos que está vacío pero antes de esto acuérdense que hay que importarlo en el app modul Entonces vamos a hacerlo directamente primero principal tenemos que importar el forms modu sí que es el que se utilizaría entonces en el caso de los formularios de plantilla y el otro es reactive forms module si que también se importa de angular forms sí Entonces forms module se utiliza para formularios de tipo plantilla y reactive forms modul formularios acá Mira copilot me ayuda de tipo reactivo sí perfecto ya tenemos esto importado entonces vamos a irnos al componente de contacto vamos a borrar este archivo que es el de testing que no lo vamos a estar utilizando y acá en contact component podemos eh utilizar de varias formas Sí primero principal debemos recordar que hay dos tipos de formularios primero vamos a hacer uno sencillito de tipo plantilla y después vamos a entrar muchísimo más en el tipo reactivo que es el que más me interesa porque es el más utilizado en general y el que utilizo yo entonces yo te lo recomiendo bueno primero y principal lo que tenemos que hacer es traernos de get bootstrap un formulario sea que esto básicamente es un archivo prácticamente vacío si vamos acá si vamos al local Host 4200 y vamos a contacto dice contact works y nosotros necesitamos claramente un formulario para poder hacer la práctica Así que vamos a ir a bootstrap que bootstrap y nos vamos a traer un formulario Sí vamos a poner ex vamos a poner acá form y acá tenemos por ejemplo algunos formularios acá me parece que este está muy bueno vamos a trn este que dice email address y password y vamos a borrar password y vamos a poner un name y ya nos trae el botón submit sí vamos a copiar este copiamos acá y pegamos s vamos a guardar y vamos a ver cómo se ve y ahí está perfecto Sí lo que sio veo es que está un poquito pegado a los costados Así que le vamos a poner un div por afuera acomodar un poquito de código y acá le vamos a poner Class container para que le dé un poquito de más forma sí Entonces tenemos email Adress password este checkbox y submit vamos a copiar este aparte de password Quiero el name vamos a poner acá por ejemplo vamos a chicar un poquito esto para que podamos ver todo vamos a poner es nombre vamos a poner Castellano email está bien acá podemos poner name name esto lo vamos a borrar no hace falta esto tampoco ID name Esto está bien Esto podemos poner email email también vamos a borrar este tiki y nos queda el password que no lo necesitamos y el checkbox tampoco si les parece lo vamos a borrar perfecto y acá el botón submit s claramente entonces habemos visto que hay dos tipos de formulario vamos a hacer primero el de plantilla si primero y principal Entonces vamos a poner acá my form como hemos dicho form acá vamos a poner entonces ng submit y acá le vamos a poner por ejemplo enviar ahora lo vamos a generar a este método por otro lado acá vamos a tener en el input sí directamente acá vamos a enlazar eh con algún atributo porlo vamos a poner acá en model y acá vamos a poner username como decía ya y lo mismo vamos a poner con user email sí de esta forma fer. email vamos a poner en ambos casos requerido require Esto va directamente así como una directiva Y eso sería todo ahora entonces tenemos que generar un objeto que tenga name email y tenemos que también hacer el formulario que va a ser my form y el enviar si vamos a ir acá y vamos a empezar primero principal lo que queremos hacer es un usuario que tenga name y email vamos a poner Entonces public usuario pun seni vamos a tipar y acá vamos a poner entonces que tenga name Ah era user perdón useros en castellano s si parece usuario Nombre nombre usuario mail email perfecto y acá en vez de My form Vamos a ponerle Entonces mi formulario para que más o menos vaya coincidiendo si en vez de de submit vamos a poner enviar Sí me parece mucho mejor que hagamos todo en castellano para que sea más fácil entonces acá el name vamos a empezarlo en vacío Sí y el email lo vamos a empezar en básica bien ya tenemos entonces esto ligado directamente con esto si porque el en model directamente se comunica Y entonces en el enviar enviar vamos a poner acá que haga un consol lock de dis usuario s vamos a probar a ver esto a ver si funciona vamos a poner por ejemplo vamos a hacer inspeccionar y acá en consola bien acá aparece un errorcito que es que está dentro de un formulario pero no está eh digamos está de forma independiente Podemos agregar este Tag sí que es que funcione Stand Alone sí de esta forma para que deje de tener error simplemente acá comamos un poquito el código vamos a ponerlo enter y enter acá podemos poner directamente acá que funcione como está en al y va a dejar de hacer el reclamo Sí si guardamos vemos que deja de hacer o podemos sacar el formulario pero nosotros queremos mantener el formulario para poder hacer el submit sí Entonces vamos a poner acá enzy model options standalone true de esa forma va a dejar de aparecer el error este si y ahora si como hemos dicho vamos poner por eemplo Pedro y acá vamos a poner Pedro @ gmail.com pemos acá y como podemos ver tenemos había quedado name pero la pucha no había quedado perfecto poner nombre acá Entonces de esa forma inicia en vacío y ahí si crea uno nuevo y podemos ver que está funcionando de forma correcta Ahora vamos a ver entonces lo que es el formulario reactivo que es el que más me interesa a mí ya que es el que más cosas vamos utilizar y el que más utilizo yo así que vamos a vamos a por ello primero principal vamos a Borrar toda esta parte de acá de acá acá tiki vamos a acar un poquito el código y esto nos esto lo vamos a dejar el enviar vamos a dejarlo nada más que por ahora vacío y ya vamos a ver qué hac con guardamos guardamos y este formulario en vez de utilizarlo así lo vamos a utilizar de otra forma ahora lo vamos a ver si Entonces ahora tenemos la misma base ven que es la misma base que el otro formulario y ahora le voy a mostrar Cuál es la diferencia primero principal vamos a inicializar todo acá Recuerden que tenemos que utilizar un constructor y acá tenemos que inyectar la dependencia del formulario acá V a poner por ejemplo private form dos puntos form builder este form builder vamos a traerlo desde angular forms vamos a poner acá Ahí está perfecto guardamos y acá dentro de las llaves vamos a inicializar el formulario sí le vamos a poner por ejemplo formulario contacto dis punto formulario contacto y vamos a inicializar pero también acá arriba tenemos que declararlo sí Entonces vamos a poner el formulario de contacto form Group y por ahora lo vamos a dejar así form Group vamos a importarlo acá vamos a ponerlo de esta forma perfecto acá como está no está inicializado tenemos que inicializar acá V a poner igual dis form Group y adentro de este objeto vamos a poner Entonces como hemos dicho los los Controls sí acá por ejemplo me está ofreciendo nombre email vamos a poner nombre Eso sí está correcto dos puntos una Ray acá vamos a inicializar en vacío y le vamos a poner por ejemplo validators validator validator vali dators require s este validat también lo tenemos que importar de acá arriba sí Perfecto es el nombre va a ser requerido si así vamos a utilizarlo para poder hacer los errores también y habíamos dicho email nada más que el validator vamos a poner validators email por ahora s de esa forma vamos a necesitar que tenga ese formato después también le vamos a poner required y para poner dos Recuerden que tiene que ir dentro de otro corchete s validator require coma y ahí va entonces va dentro de una array de validadores s Entonces ya tenemos acá el formulario Y tenemos los form Controls vamos a ir acá al html y vamos a hacer que se conecte vamos a poner entonces form Group igual se llamaba formulario contacto Sí y este sería form control name igual y este se llamaba name o nombre era cómo era nombre Perdón nombre y este de acá abajo se llamaba form control name igual email sí bien acá en el enviar lo que vamos a hacer es hacer un console log de dis formulario contacto para empezar a sacar un poco de información a ver de qué trata Sí vamos a ver vamos a poner entonces acá por ejemplo Pedro como hemos puesto y Pedro Jime y ojo fíjate todas las cosas que trae Este es un objeto form Group el que trae y vamos a chusmear un poquito por ejemplo en Controls podemos ver que tenemos Nombre e email y en value tenemos un objeto que trae todo este value es muy parecido al que a lo que nos mostraba el otro formulario recuerdan es un objeto común y corriente pero en control tenemos mucha información valiosa por ejemplo en email tenemos que es válido O sea que esto cumple con la condición de que sea mail y esto también vamos a ver que es válido porque cumple la condición de que era requerido podemos ver otras cosas más como por ejemplo que es pristine false porque lo hemos tocado al al al formulario podemos ver que Touch es true porque hemos entrado y salido del formulario y podos ver el valor actual Entonces si punto Val va a darnos el valor actual value changes y status changes fíjense que son emisiones de eventos O sea que la podremos Escuchar Ya lo vamos a ver un poquito más adelante y podemos ver algunas cosas más acá como que dirty disable etcétera Sí ya vamos a aprovecharnos de eso para poder Mostrar los errores vamos a ver algunas cositas más si yo por ejemplo borro totalmente el nombre acá no me aparece ningún error pero si hacemos un enviar vamos a ver que ahora sí aparece nombre invalid y y aparece el famoso errors donde dice required true Entonces nos vamos a aprovechar de esto lo mismo que email si ponemos así no va a ser válido borramos esto y Fíjate que en email va a decir que es inválido Sí y el error va a ser email Sí el nombre es muy parecido a lo que nos dice validador punem mail validador required Sí vamos a tratar de aprovechar nu estos errores para hacer que se vea eh se vea con errores Sí vamos a hacer algo sencillo por ahora primero principal vamos a hacer lo que nos ofrecía El ejemplo pero vamos a utilizar errores desde bootstrap sí vamos a ir acá y vamos a ver errores a ver validation siamos validation acá fíjense que acá ya nos va a mostrar algún tipo de error más abajo más abajo y acá ya aparecen algunos errorcito me gustaría primero principal fijémonos que tienen la clase is is valid o is invalid sí esto nos va a servir para hacer un ng Class y poner que está equivocado Y además fíjense que acá abajo también tenemos invalid feedback o sea esto es un invalid feedback sí Entonces vamos a tratar de copiarnos un poquito algunas cosas primero invid feedback vamos a poner acá poner acá por ejemplo este y este ID no hace falta pero acá si le vamos a poner por ejemplo vamos com un poquito a poner campo requerido o nombre requerido si nombre requerido guardamos y acá Bueno vamos a hacer exactamente lo mismo vamos a poner acá nada más que acá le vamos a poner por ejemplo mail inválido mail inválido sí perfecto formato email formato formato inválido como ustedes quieran s vamos a ver a ver cómo se ve se va a ver con el error todo el tiempo claramente bien en este caso no nos va a servir porque invalid feedback está relacionado a una clase propia de boostrap que se muestra únicamente si estás utilizando las validaciones de de boostrap vamos a cambiarlo por text dunger sí text Danger y text Danger porque si no el otro se mantiene oculto tiene una propiedad sss que se mantiene oculto ahora si vamos a ir acá y ahí está Nombre requerido e email de formato inválido pero no queremos que se mueste siempre queremos únicamente que se muestre Si solo si no cumple con las condiciones Entonces vamos a hacer lo siguiente fíjate que acá dice type email pero nosotros queremos type text si no hemos olvidado y bueno queremos que s o s se muestre Si solo si es inválido no vamos a armarnos un método que devuelva true o false entonces hacemos un ngif tanto acá como acá ngif si y acá vamos a poner por ejemplo has errors y le vamos a pasar como parámetro en este caso acá name Y en este caso acá le vamos a pasar email s y vamos a crear este has errors vamos a copiar acá y vamos a perfecto mira y acá ya me está diciendo buenísimo Esto me está diciendo por ejemplo control me está me está expando un poco lo que yo quería hacer que es básicamente el control name perfecto do puntos String cerramos y acá retornamos acá vamos a hacer formulario contacto está bien get control name esto hasta ahora está bien pero no queremos un punto error simplemente sio vamos a poner has error si para ver que sea exactamente el error que nosotros queremos y cuál es el error que nosotros queremos va a ser en este caso require s y además tiene que ser Touch Así que Supongo yo que ahí está perfecto Ahí me lo requier entonces también tenemos que pasarle esto porque ahora que he pensado También tenemos que ver que no sea email Entonces vamos a pasar acá también tipo de error error type sí Y también va a ser un String y este error type va a ser el tipo de error que vamos a buscar dentro de los errores sí Perfecto entonces acá también le vamos a pasar aparte de name le vamos a pasar que queremos ver si es requerido required y acá si es de formato email si y esto de dónde coincide tiene que coincidir como habemos visto con estos errores Sí si nosotros acá ponemos Pedro eh Perdón acá ponemos vacío acá ponemos o fíjense que va a decir invalid y acá en el email nos va a decir tipo de error email sí y en el caso del nombre va a decir invalid de tipo required sí perfecto vamos a ver cómo funciona vamos a actualizar un poquito esto y vamos a escribir vamos tocar tocar y salir tocar y salir fíjense que el nombre no está funcionando Sí pero acá yo estoy pasando name y no es name sino que es nombre sí acá me hab confundido Perfecto entonces ahora sí si no tocamos y nombre requerido tocamos acá y nada pero si ponemos un mal mail dice email formato inválido si ponemos Pedro Deja de decir error y si ponemos un mail de formato válido deja de mostrar error ahora Nosotros también queremos que email vacío nos dé error de email requerido Porque si ustedes se fijan acá sigue siendo requerido Por lo cual vamos a hacer una doble validación pero también vamos vamos a cambiar el lo que dice el error Entonces vamos a duplicar esta línea haciendo al shift abajo y vamos a poner has errors email está bien pero acá vamos a poner requir sí Y acá vamos a poner email requerido guardamos y ahora vamos a ver si funciona tocamos acá tocamos acá tocamos acá tocamos acá perfecto pero esto se ve medio mal porque no se marca lo que es acá alrededor vamos a utilizar uno que habíamos visto acá que era en el forms s fíjense que acá hos visto que el manejo de errores había un una una clase que era para mostrar rojo alrededor que es esta que es isid invalid Entonces vamos a poner lo siguiente vamos a poner en el input tanto en este como en este en cl porque nosos estamos viendo que sea una clase y adentro de acá vamos a poner entonces depende de dos condiciones una de has error required en este caso acá esto hay que ponerlo entre comillas y además esto tiene que ir entre corchetes vamos a guardar vamos a ver si funciona y ahí está funcionando Ahora qué pasa para el famoso mail Porque necesitamos dos errores entonces necesitamos hacer algo muy parecido esto O sea vamos a copiar Este pero fíjense dar un enter para que no se haga tan largo pero fíjense lo que vamos a hacer acá acá vamos a hacer lo siguiente vamos a pegar acá sí para tener todo vamos a poner enter pero necesitamos que aparte de chequear si tiene errores de requerido también tiene que chequear que no tenga errores de email entonces vo a poner o has error de tipo email sí acá también el el el el tipo de form control es mail y mail Así que va a chequear si es requerido y si es Mel y también va a mostrar vamos a ver si funciona vamos a ver tiki tiki funciona tiki tiki funciona los dos requeridos y se ve rojo alrededor y si ponemos acá Pedro desaparece y si ponemos acá por ejemplo Así dice formato inválido hasta que completamos un formato válido sí bien después esto por supuesto ustedes pueden Investigar un poco más de los validadores Hay un montón reex etcétera así que por ahora vamos a verlo un poquito para arriba pero siempre se tienen que fijar un poquito en esta parte uno de lo que podemos chequear para para poder hacer que tenga dos validadores como el email el nombre por ejemplo es un min length vamos a poner acá lo siguiente vamos a poner por ejemplo acá coma validators Mira acá me está diciendo min leng 3 sí perfecto vamos a tratar de meterle acá y acá Viene un truquito que tiene que tener muy en cuenta acá min len fíjense que vien en camel Case m n minúscula l mayúscula pero ojo acá esto tengan mucho cuidado vamos a tratar de hacerlo primero y después les a mostrar una cosita vamos a poner nombre y acá min leng pero fíjese que lo voy a escribir todo con minúscula sí no voy a copiar esto de acá y lo voy a pegar con mayúscula acá le voy a escribir con minúscula por qué porque así se ve en el en el en el objeto eso se lo voy a mostrar entonces poner nombre requiere mínimo tres caracteres y lo mismo acá vamos a agregarle o min length Sí o sea lo mismo acá perfecto y ahora les voy a mostrar dónde es que sale este esta cuestión tocamos acá vamos a poner porlo uno acá sí y uno acá vamos a poner enviar y les quiero mostrar Por qué es que yo puse todo en minúscula para que funcione si se fijan acá Acá está la clave Fíjate que el min leng Acá está en minúscula min leng todo todo en minúscula Y ustedes tienen que chequear que este es el que van a estar chequeando Sí por qué les muestro esto particularmente porque este error es muy común que pase vos pones min length en camel Case igual que te aparece acá sí que sería lo más obvio pero no te va a funcionar Si tenés esa mayúscula sí únicamente va a funcionar bien Si tenés exactamente esto acá te trae más información para las dudas pero pueden ver que acá nombre requiere mínimo tres caracteres ya está funcionando de forma correcta y se marca también alrededor sí Ahora les quiero mostrar dos cosas más a acerca de formularios que es muy interesante una van a ser las suscripciones sí Y otra va a ser hacer seteo de información de para el comienzo sí o para por algún motivo sea que les quiero comentar que si ustedes entran un formulario y por ejemplo ustedes están logueados o o su cliente está logueado no va a querer escribir su nombre de nuevo Entonces vamos ahora hacer lo siguiente vamos a hacer que se setee el nombre y vamos a hacer que se deshabilite para que no lo pueda modificar y vamos a hacer cosa más vamos además a a suscribirnos a los cambios en tiempo real vamos a probarlo Entonces vamos a ir acá contact y para poder hacer ambas cosas necesitamos utilizar el ciclo de vida enit ya vamos a ver ciclo de Vidas no me quiero adelantar pero necesitamos para hacer este ejemplo Entonces vamos a poner implement on init si y vamos a traerlo de acá de angular Core si y acá me va a traer un error porque necesito implementar init que es básicamente un método que se va a ejecutar apenas arranca el componente ya vamos a ver ciclo de vida de los componentes pero ahora necesito hacer esto acá vamos a hacer lo siguiente hagamos de cuenta que el nombre Sí vamos a saber vamos a traerlo por ejemplo de un de un backen o vamos a traerlo de otra parte de nuestra aplicación que nos va a decir cómo se llama la persona se va a llamar Pedro hag cuenta que lo tenemos definido acá y vamos a decir por ejemplo usuario activo dos puntos String igual Pedro ya sabemos que es Pedro s esto por ejemplo lo estamos trayendo otro lado damos de cuenta que lo estamos trayendo otro lado ahora lo vamos a poner ahí para que nos sea más fácil para el ejemplo pero damos de cuenta que lo estamos trayendo desde el backend o simplemente porque está logueado en otra parte de la aplicación Entonces cómo hacemos para setear al principio y bloquearlo para que no pueda escribir lo vamos a hacer de la siguiente forma vamos a poner dis punto formulario contacto punto get entre paréntesis nombre que es así como se llama el form control name y acá le vamos a poner set value si set value Y qué le vamos a pasar le vamos a pasar usuario activo si dis usuario activo y además no queremos que se pueda modificar Entonces vamos a poner lo mismo dis formulario contacto get nombre di fíjate que acá me ofrece este signo de pregunta es porque puede ser esto puede ser eh undefined Y puede dar un error Así que fíjense que vamos a probar esto que hicimos acá vamos a ir al código y fíjate que acá ya aparece deshabilitado no puedo hacer nada no puedo escribir ni nada Sí entonces si vos ya tuvieras información del usuario y no queres que se se pueda modificar puedes sarlo de esta forma Pero además podemos hacer otra cosa en vez de hacerlo de esta forma también yo podría tener por ejemplo muchos más Campos vamos a hacer de cuenta que no solamente tenemos name sino tenemos por ejemplo muchos más por ejemplo apellido y vamos a poner por ejemplo dni vamos a hacer cuenta y vamos a poner acá también lo mismo vamos a duplicar esta parte de arriba si voy a chequear un poquito esto vamos a poner tiki tiki acá vamos a reemplazar nombre por apellido si vamos a copiar acá acá acá acá y acá poner apellido apellido apellido y acá habemos dicho Entonces dni vamos poner Entonces dni era dni o documento acá fíjense que también tengo que poner fíjense AC me hab olvidado contr muy importante ir apellido AC y acá vamos poner dni requerido dni requiere mínimo tres caracteres vamos a guardar y vamos a ver que ahora vamos a tener nombre apellido y dni si lo mismo vamos a poner acá apellido requerido uno apellido requiere requerido requ Sí para que ustedes vayan viendo que es muy fácil duplicar toda esta información y ahora no queremos setear solamente de Nombre quemos setear nombre apellido y no vamos a hacer esto cuatro veces sí porque me parece exageradísimo les voy a mostrar otra forma los disable estamos un poco obligados eso no les voy a mentir pero pero pero les puedo mostrar otra forma que es utilizar dis punto formulario de contacto y en vez de hacer uno por uno puedo poner lo siguiente punto Patch value abrimos y cerramos llave eh paréntesis y abrimos cerramos llaves y acá les paso directamente lo que quiero sar de forma definitiva ent ponemos acá nombre dos puntos Pedro como dice acá pero en realidad vamos a poner de usuario activo acá usuario activo por ejemplo voy a cambiar un poquito en vez de un Stream voy a poner un objeto y a poner por ejemplo acá vamos poner por ejemplo nombre Pedro apellido Pérez perfecto y dni ahí perfecto mir me ti el dni Perfecto entonces vamos a hacer básicamente usuario activo punto nombre Sí y vamos a poner acá apellido apellido dni den s entonces con Patch value puedo setear una parte del formulario fíjense que email no voy a sarlo y no hay ningún problema y ahora lo que si hay que hacer en tres casos es el caso del disable vamos a poner apellido y dni vamos a guardar y vamos a ver que logramos el mismo resultado entonces Patch value sirve para patar una parte del formulario Patch es para patar una parte del formulario en este caso email porlo lo tocamos y logramos esto además también podemos hacer otra cosa que es muy importante Por ejemplo en el caso de No setear acá por ejemplo estas validaciones de dni apellido vamos a borrar esto por ejemplo vo a borrar esto también podemos setear validadores acá abajo podemos por ejemplo hacer lo siguiente poner acá abajo dis punto formulario contacto punto eh acá sería apellido sí acá me escribió lo que quiso Perdón punto set validators y acá está fíjense que acá me me ofrece entonces de esta forma podemos setear los validadores por fuera de acá por qué les muestro esto porque a lo mejor ustedes Dependiendo el tipo de pantalla que tiene Mostrar es obligatorio un campo o no es obligatorio Entonces ustedes empiezan sin que sea obligatorio y acá por ejemplo le ponen If no sé eh usuario activo punto eh apellido es igual a vacío le pone entonces que el formulario sea obligatorio ahora si bien es seteado por ejemplo No no es cierto esto es un puede ser un montón de casos sí eh después verán la lógica de negocio y lo aplicará sepan que se puede setear y también se puede hacer lo contrario si no pero hay una cuestión acá Entonces vamos a ver un poquito les quiero mostrar algo Si nosotros queremos sacarle el lo que es la validación hay que poner dis punto formulario contacto punto get apellido por ejemplo y queremos sacarle el validador se pone Clear validators y abajo tenemos que poner esto mismo update and validity acá como me sugiere copilot Por qué es esto porque se tiene que actualizar el formulario una vez que hacemos Clear en validators Sí ahora vamos a ver si esto funciona Porque fíjense que yo ahora no no sería más requerido ni tendría mínimo de leng Entonces vamos a ver vamos a probarlo realmente primo principal vamos a sacar de acá del Patch value del apellido así no me lo setea y también del disable Sí ahí está perfecto ese apellido nos va a permitir cambiar fíjense que ahora no está utilizando los validadores sí no no se marca en rojo por qué Porque yo hice Clear validators y update value validity otra cosa igual de importante que Esto va a ser el tema de las suscripciones vamos a borrar un poquito esto porque no me interesa todo esto también vamos a borrarlo Sí vamos a acomodar un poquito el código y ahora les quiero mostrar subscripción esto es clave clave clave clave clave clave vamos a ver por ejemplo cómo suscribirnos al formulario entero vamos a poner dis punto formulario contacto vamos a poner value changes sí que lo habíamos visto no sé si se acuerdan lo habíamos visto acá tocamos enviar fíjense que hemos visto acá que value changes es un emisor es un emisor de eventos y una de las cosas que nos ofrece va a ser el valor actual Entonces vamos a ver vamos poner value changes subscribe nos vamos a poder suscribir Sí vamos a poner por ejemplo acá como me dice acá valor puede ser puede perfecto función de flecha abrimos y cerramos y acá por ejemplo podemos poner cons sol valor Perfecto entonces acá vamos a ver el valor completo del formulario Entonces miren miren Atentamente esto vamos a borrar un poquito esto fíjense que yo ir escribiendo cada cosa que yo escriba cualquier cosa que yo escriba dentro del formulario se va a ejecutar este esta suscripción porque está escuchando todo lo que haga todo el formulario sí fíjense que me tomó toda la información del último inclusive si yo borro borro borro Sí también aparece vacío esto es muy importante por muchos motivos porque nosos podos llegar a necesitar hacer ciertas cosas dependiendo que haga el formulario por ejemplo vamos a mostrar una vamos a ir a boostrap y vamos a poner por ejemplo acá un Select vamos a buscar un Select a ver un combo selector a ver perfecto por ejemplo este les parece bien Vamos a copiar acá vamos copiar AC vamos a poner acá vamos a poner acá por ejemplo vamos a duplicar poner tipo dni sí tipo dni vamos a agregar acá y acá por ejemplo arriba de dni Sí vamos a poner este Igual también vamos a ponerlo la misma clase de bootstrap de los otros para que quede Igual vamos acomodar un poquito el código y acá tenemos por ejemplo esto así y vamos a poner tipo de dni vamos a poner por ejemplo dni pasaporte libreta cívica no creo que haya mucha gente con cédula me parece mejor cédula porque Lia cívica ser muy viejo vamos a ver cómo se ve esto y perfecto fíjense que acá se ve de forma correcta Acá está muy pegadito porque no tiene lb podos poner un lbel verdad ponerle un ID tipo d y hacer y poner un lbel También acá para que se vea igual tipo dni y acá vamos a hacer esto Vamos a ponerle acá vamos a borrar esta Select y vamos ponerle acá el tipo dni guardar y fíjense que aparece ya con dni primero y así perfecto bien ahora está mucho mejor me parece que se ve se ve mucho mejor Por lo cual idea ahora es que cuando hagamos cambio de esto aparezca Este título distinto por ejemplo cierto entonces Este título por ejemplo y este y este van a cambiar si dependiendo qué seleccionemos acá por ejemplo acá poner lo siguiente vamos a hacer una variable por ejemplo acá vamos a poner tipo dni puntos a poner un String si vamos a poner vacío y vamos a hacer la suscripción que habos hecho pero solamente vamos a suscribirnos a tipo de dni Entonces vamos a hacer hasta ahora todo bien hasta acá pero acá vamos a cambiar por get tipo dni Ahora sí punto value changes punto subscribe Y acá vamos a poner value y lo que vamos a hacer es hacerle al tipo dni dis punto tipo dni el valor vamos a ver si si esto funciona y además acá Recuerden que tenemos que cambiar esto por entonces un interpolado y vamos a poner acá Cómo era que se llamaba tipo dni sí a poner acá y esto mismo lo vamos a poner acá y lo vamos a poner acá sí vamos a guardar y vamos a ver si esto está funcionando acá no dice nada porque arranca en vacío Por lo cual acá vamos a tener que arrancarlo en dni Entonces sí vamos a arrancarlo así o podríamos ponerlo que arranque en dni acá sí podemos poner que arranque en dni acá también se podría hacer vamos a probar a ver pasa que está escuchando el value change no perdón tengo que arrancarlo acá el dni porque está escuchando el value change y acá todavía no cambió nada Sí vamos guardar arrancan dni y fíjense que dice pasaporte cédula no estaría cambiando nada faltó acá poner en el Select el form control name Sí por eso no lo está escuchando tenemos que poner from control name y acá tenemos que ponerle tipo dni sí Y además acá en value También tenemos que poner el valor de lo que dice si no nos va a poner 1 2 3 sí perfecto Ahora sí vamos de nuevo perfecto ya arranca en dni Sí si vamos dni arranca dni pasaporte cambia pasaporte cédula cambia a cédula sí fíjense que cambia el nombre dependiendo de lo que seleccionemos sirve para esto y para muchísimas cosas más por ejemplo si nosotros quisiéramos hacer que cambie la pantalla radicalmente dependiendo de cómo vamos conru Endo se vamos seleccionando cosas y va abriendo y cerrando distintas cosas también nos va a servir Este value changes sí perfecto esto ha sido todo por esta sección y vamos a la siguiente sección que está increíble que vamos a ver esto que vimos un poquito acá ya le spoil Lamentablemente Pero no importa que es ciclos de vida de un componente Así que vimos uninit quizás vemos otros nos vemos en la siguiente sección vamos con una sección también muy importante casi como todas que es la de ciclos de vida de un componente y esto Qué significa un componente cuando aparece por primera vez nace sí se crea se inicia y cuando va pasando las distintas etapas por ejemplo se termina de cargar chequea que está todo cargado si se modifica algo sí y el último cuando se sale de ahí se deja ver se destruye sí Entonces ese ciclo de vida nos va a servir para hacer acciones en determinados momentos vamos a ver uno por uno aunque no todos se utilizan mucho si bien Vamos a ver todos tres son los más importantes vamos a ir viéndolo acá en el código ciclo de vida el ciclo de vida de un componente se compone de una serie de eventos que ocurren desde la creación hasta la destrucción del componente acá están todos engine changes Se dispara cuando los datos de entrada @input sí del componente cambian en init ocurre después de que angular ha inicializado todas las propiedades del componente que es la que vimos hace un ratito enid check se ejecuta Durante cada detección de cambios y permite realizar acciones de verificación personalizadas en after content init ocurre después de que angular haya proyectado el contenido en el componente en after content checked se ejecuta después de cada verificación del contenido proyectado ng after View init ocurre después de que angular haya inicializado las vistas del componente ng after View check se ejecuta después de cada verificación de las vistas del componente ng on destroy Se dispara justo antes de que angul destruya el componente esto es muy importante y las más importantes son las primeras dos enion changes en init y la última enion destroy ya que enion changes nos va a servir para estar escuchando todos los cambios que haga el padre nos va a estar Siri Endo para inicializar las suscripciones las variables Llamar a servicios etcétera y enion distory nos va a servir justamente para lo contrario para eliminar de memoria todas las suscripciones todos los observables y todo lo que haya quedado abierto en el componente lo del medio puede a servir puntualmente para algunas cosas pero en general casi nunca se usan Pero si ustedes necesitan hacer algo muy puntual por la lógica de negocio que cada vez que cambia algo esto lo otro tengan que hacer algo puede llegar a ser que necesite en esto en general como les digo no son tan utilizadas vamos a verlas todas Pero les voy a mostrar un poquito más a profundidad las primeras dos y la última eng changes Se dispara cuando los datos de entrada input del componente cambian en este ejemplo el componente tiene una propiedad de entrada llamada nombre input podemos ver acá o sea el padre nos está pasando nombre input cuando esta propiedad cambia desde el componente padre el método eng changes se activa fíjense que está escuch escuchando los changes Y si el padre cambia El input Tac se larga el engine changes dentro del engine changes puede acceder a los cambios a través del parámetro changes y realizar acciones en respuesta a esos cambios por ejemplo en este caso si cambia el nombre input como podemos ver acá ahí recién ejecuta algo ya lo vamos a ver también en un ejemplo en jinit este es s super importante se utiliza todo el tiempo este realmente se utiliza todo el tiempo ocurre después de que inicializado todas las propiedades del componente es un buen lugar para realizar inicializacion adicionales entre ellas suscripciones y observaciones En Este ejemplo engon init se implementa en la clase del componente y se utiliza para realizar acciones después de que angular haya inicializado todas las propiedades del componente en este caso se establece el valor de la propiedad nombre y Se imprime un mensaje en la consola Recuerda que on init es un buen lugar para realizar inicializacion adicionales como la obtención de de datos de un servicio o configuración de suscripciones observables como la que hicimos en el formulario por ejemplo sí acá vos que está nombre constructor está vacío podemos inicializar También acá en el constructor pero en el engine init claramente estamos seteado el nombre del valor de este atributo sí bien acá vamos a entrar en algunas no muy utilizadas la vamos a leer y vamos a ver que eh tienen algunas observaciones y advertencias porque algunas veces puede dar o ciclos o te puede hacer muy linda la aplicación Así que ojito vamos a ir uno por uno y les voy a dar las advertencias y para que puedas utilizarse sí enid check se ejecuta durante de cada detección de cambios y permite realizar acciones de verificación personalizadas en este ejemplo el método ngd check se llama Durante cada detección de cambios en angular puedes realizar acciones de verificación personalizadas Dentro de este método ten en cuenta que enid check se ejecuta con frecuencia por lo que es importante no realizar operaciones costosas en términos de rendimiento Dentro de este método a diferencia del ng on changes este se ejecuta cada cambio que haya en la pantalla Entonces se ejecuta constantemente entonces si vos estás llamando un servicio haciendo algo muy costoso la aplicación va a andar lentísima y se va a utilizar muchísima memoria y se puede llegar a colgar el navegador o se puede inclusive hacer un bucle y colgar la página o la computadora es que hay que tener mucho mucho cuidado en after content init en este ejemplo ng after content init se utiliza para realizar acciones después de que angular haya proyectado el contenido en el componente también se utiliza content Child para acceder a un elemento específico dentro del contenido proyectado si el elemento con el nombre nombre elemento está presente Se imprime el mensaje de consola Por ejemplo si nos tenemos mucho ngf sí por todos lados por acá por allá condicionales para poder ver nosotros queremos ver si por la forma en la que se ejecutó el componente está está o no hacemos un content Child seleccionamos por ejemplo un h1 que se llame título por ejemplo Y si ese título está se hace un consol o sea una vez que se terminó de armar el componente chequea Y si está lo muestra Sí para eso se por eso dice after content init después de que el contenido se inicia sí vamos a ir con el siguiente ng after content checked se ejecuta después de cada verificación de contenido proyectado Entonces en este ejemplo que vamos a ver ahora ng after content checked se utiliza para realizar acciones después de cada verificación del contenido proyectado en el componente también se utiliza ng content Child para acceder a un elemento específico dentro del contenido proyectado si el elemento en este caso con el nombre nombre elemento está presente Se imprime un mensaje consola recuerda que en after contex check se ejecutará cada vez que angular verifique el contenido proyectar por lo que debes ser conciente la eficiencia de las operaciones que realicen este método lo mismo puede ser que haya un bucle o use mucha memoria la diferencia entre este y el anterior Es que este únicamente cuando se inicialice el contenido y este cada vez que cambia sí hay que tener mucho cuidado porque acá digamos se va a ejecutar cada vez que cambia Entonces si está presente esto va a ejecutarlo un montón de veces así que hay que tener mucho cuidado en after viw init este en este ejemplo ng after View init se utiliza para realizar acciones después de que angular haya inicializado las vistas del componente se utiliza View Child en este caso para acceder a un elemento específico de la vista en este caso un párrafo con la referencia mi párrafo si el el párrafo está presente Se imprime contenido es muy parecido al anterior pero en este caso es cuando la vista completa se inicializa sí Y también esto es un caso muy parecido Y en este caso fíjense que está utilizando native Element text content para poder entrar al contenido html y ver acá Mostrar el el contenido explícitamente Este es otro y también sirve para poder aprender un poquito más de estos elementos de angular Como por ejemplo you ch o content ch que vimos recién s está muy bueno también le paso aprovechamos ng after viw checked esto es parecido pero cuando ya la vista ya se ha chequeado y fíjense que no hace la misma recomendación o sea nos va a mostrar en consola y también dice que esto hay que tener cuidado con lo que se haga acá porque se va a mostrar cada vez que la vista se chequee Sí y bueno vamos al último y este sí es muy muy muy importante enion destroy Se dispara justo antes de que angular destruya el componente es un buen lugar para hacer limpieza y eliminación de suscripciones observables como le había comentado en Este ejemplo enion destroy se utiliza para realizar acciones justo antes de que angular destruye el componente se simula una suscripción un observable en el constructor del componente y en el enion dist se verifica y se desuscribe de la suscripción para evitar posibles pérdidas de memoria este método es muy útil para realizar limpiezas y de suscribirse sí como podemos ver acá se había suscrito a una suscripción simplemente así digamos está simulá esto y se utiliza acá para suscribirse esto lo vamos a ver y esto ha terminado vamos a verlo un poquito en código y vamos a primero empezar por el engine in vamos a ver acá que ya lo utilizamos y básicamente se pone implements on init se importa de angular Core y acá extension init se va ejecutar apenas iniciar el componente en este caso que habíamos hecho habíamos escuchado y suscrito a un value changes de tipo dni sí Entonces cuando cambie este Esto va a estar suscrito sí se utiliza por ejemplo para suscribirse entre muchas otras cosas también podemos por ejemplo setear como habos mostrado nombre dis form contacto get nombre por ejemplo ponemos set value vamos a poner Juan por ejemplo como dice acá acá y vamos a hacer lo mismo d punto formulario el contacto y acá vamos a poner nombre también y vamos a poner por ejemplo disable disable sí guardamos acá fíjense que Juan está deshabilitado porque por ejemplo como habemos comentado en el en el ejemplo anterior puede ser que esto ya esté seteado porque está logueado por ejemplo no entonces ya necesitamos que empiece logueado y además está suscrito este cambio fíjense que cambia el título según lo que elijamos entonces para esto sirve el engine ahora vamos a hacer lo contrario vamos a usar el enion destroy para desuscribir y también para poner un conso loog para ver cómo funciona un poquito sí entonces enion destroy antes de hacer esto También tenemos que implementarlo acá on destroy sí vemos acá también y acá vamos a poner ng on destroy perfecto vamos a hacer este consol y vamos a ver cómo esto se ejecuta cuando cambiamos de de pestaña vamos a ver ahora vamos a sacar esto Y si cambiamos de pestaña por ejemplo vamos a Home fíjense que acá aparece se destruyó el componente Si volvemos a productos y salimos se destruyó el componente nuevamente sí Ah perdón estamos en contact ahí está se destu componente vamos home contact tiki y se vuelve a escribir sí de esa forma podemos ver que claramente cada vez que salimos se de estos en este caso este tipo de suscripciones así si lo hacemos de este tipo no nos podemos desuscribir de esta forma pero angular quédense tranquilos se desuscribe de forma correcta si nosotros nos fijamos acá ponemos un conso loog de value y vamos cambiando acá nos aparece una sola vez si vamos y volvemos si vamos a Home y volvemos no aparece dos veces aparece una sola quiere decir que se suscrib con éxito sí los tipos de suscripciones que hay que desuscribirse son cuando utilizamos por ejemplo una suscripción de forma de rxjs sí en este caso no lo vamos a ver porque tenemos que cambiar muchísimo el código pero sepan que normalmente se suele hacer acá otra cosa para la cual también se puede utilizar es que si estamos utilizando un servicio de pivot para mandarnos información entre entre padre e hijo o entre hermanos o lo que sea podos utilizar acá en el caso que dejemos de utilizar esa función para hacer los sets de todo vacío Por ejemplo si nosotros cuando inicializar la la aplicación está todo vacío y después hacemos ciertas acciones y cuando salimos de esa pantalla vemos que quede todo vacío de nuevo esa limpieza también se puede hacer en enion destroy Sí en principio este tipo de suscripción no nos vamos a desuscribir no se puede suscribir o o se podría desuscribir pero haciéndolo de otra forma Por lo cual no lo vamos a ver acá pero lo que sí vamos a ver es el engine changes Así que si les parece vamos a hacer una un componente hijo por ejemplo de acá de contact y vamos a pasarle algún tipo de información para que de esa forma podamos probar el engine change Sí vamos a generar entonces un hijo nuevo Recuerden que se puede hacer haciendo lo siguiente ng generate component vamos a poner entonces ADO de contact barra y vamos a poner por ejemplo dni y vamos a migrar allí adentro solamente el el input del dni y vamos a ver cómo funciona vamos a poner así vamos a tener ahora dentro de contact el dni por separado Entonces cuando hagamos el cambio de tipo de dni vamos a mandárselo al hijo y el hijo va a emitir al padre el el dato Sí vamos a trabajarlo un poquito así para ver un poquito Cómo puede ya estar funcionando esto para que vean el Cómo funciona el engine change perfecto Ah se creo Si vemos está el dni acá vamos a a ver cómo se llama este este componente se llama app dni poner por ejemplo mejor dni input me gusta más guardamos y vamos a llamarlo desde contact Entonces vamos a cerrar un poquito este y este acá y acá Entonces esto que es el dni lo que es el dni acá vamos a migrar dentro del hijo Entonces vamos a poner esto si si les parece acá dni input acá y todo esto que está acá dentro lo vamos a migrar dentro del dni component si vamos a ir a al html vamos a acá y bueno acá hay varias cosas necesitamos el has errors necesitamos el tipo dni si y varias cositas más vamos a guardar Por ahora y vamos a tratar de migrar también la parte la lógica primo principal una de las cosas que necesitamos de acá es el has errors s vamos a ponerlo acá ti acá vamos a cambiar después formulario de contacto por el nuevo formulario y vamos a copiar por ahora esto si vamos a poner acá y le vamos a ir modificando algunas cositas si per principal vamos a importar form Group también lo vamos a copiar acá para no sea un poquito más fácil perfecto y vamos a ir de poquito primero principal de acá Solamente necesitamos dni vamos a borrar el resto y no se va a llamar formulario de contacto sino se va a llamar formulario documento y vamos a poner acá s vamos a cambiar acá y vamos a cambiar acá Perfecto entonces ya tenemos todo salvo acá en el dni vamos a ver que no tenemos lo que es tipo dni acá aparece como tipo aparece dni ahora lo que nosotros necesitamos que esto sea un input porque vamos a cambiar desde afuera vamos a empezar con es vamos a poner @ input vamos a incorporar angular Core abr cerrar y vamos a poner esto de acá Perfecto entonces esto lo va a estar recibiendo desde el padre podemos inicializar con dni pero el padre es el que nos va a mandar esto vamos a ir nuevamente contacto tenos que ver que dni ya no va a estar más lo vamos a borrar y lo que tenemos que mandar es el tipo dni si tipo dni claramente se tenemos que mandar al hijo vamos a ir acá y vamos a hacer lo siguiente Vamos a ponerle corchetes tipo dni igual tipo dni sí Entonces estamos mandando tipo dni que se llama así empieza en dni y después puede ir cambiando y recibe tipo dni porque así se llama acá también bien Ahora vamos a ver el tema del eng changing vamos a poner acá entonces implements on changes y lo vamos a incorporar de acá sorar por ahora y vamos a poner entonces ng on changes y en el on changes vamos a poner acá changes dos puntos vamos a tipar como simple changes también lo vamos a incorporar de acá y vamos a hacerle un conso para ver qué tipo de cambios hace vamos a ver qué es lo que nos trae Entonces ahora tenemos pero este el hijo acá nos habíamos olvidado de una cosita ahí me dio un errorcito había olvidado una cosita este dni tiene que estar en medio de un formulario no hemos olvidado de este pequeño detalle esto tiene que estar dentro del form que armamos recién si no nos va a funcionar todo esto poner acá y este form recordemos que tiene que tener este nombre si vamos a poner form Group form Group igual este form si no no va a funcionar lo que habemos hecho ahora s vamos nuevamente acá y ahí fíjense que Ya apareció algo acá pero no quiero spoil as que borrar y voy ir cambiando acá Este cambio que aparece acá es en el de contacto vamos a borrar esto por ahora para que no nos moleste un cons guardarlo y vamos a volver a esto voy a borrar por ahora Esto entonces si yo cambio fíjense lo que hace tiqui tiki tiki tii tii como el primero no cambia Porque si nosotros actualizamos acá arranca con dni fíjense que dice current value dni Porque yo lo había inicializado como dni si bien acá no aparece si lo habemos inicializado así fíjense acá sí Si nosotros empezamos en vacío fíjense va a ser un poquito más fácil Entonces cuando yo cambi dni ya aparece sí y fíjense qué es lo que nos trae adentro tiki vamos a poner acá tiki tiki tiki qué es lo que nos trae acá dice current value o sea el valor actual y aparece el dato y después aparece el el dato eh anterior por ejemplo y así entonces dice First change false esto esta información nos puede llegar a servir Sí para algunas cosas Pues nosotros si queremos solamente detar el primer cambio Buscamos que acá diga true sí Y también podemos ver el el el el valor previo está muy bueno pero lo que nosotros emos Entonces es poner punto dni current value para poder ingresar para poder saber lo que necesitamos entonces necesitamos acá en vez de ch solo podos poner Y en vez de poner tipo dni así como dice Acá hay que poner esto entre llaves y comillas si de esta forma y acá una pregunta porque puede ser undef Esta es la forma en la que tenemos que ingresar ya que es un objeto de tipo indexado complejo pero ustedes escríbanlo Así va a funcionar entonces si nosotros cambiamos ahora fíjense que ya vamos a poder ingresar directamente a este dato sí bien acá claramente está escuchando Si vemos acá el tipo de dni Por lo cual sigue cambiando Porque si estamos pasando a través del input del padre pero si nosotros quisiéramos eh Por ejemplo no tiene mucho sentido en realidad hacerlo pero vamos a hacer otra otra variable variable nueva String que empiece por ejemplo en dni y esta variable nueva sea la que querramos cambiar acá por ejemplo vamos a poner así dis pun variable nueva igual esto vamos comar todo y esta variable nueva va a ser la que vamos a hacer en el dni por ejemplo tiki tiki tiki y ahora fíjense que si yo inicio la primera diferencia va a ser que me va a sobreescribir la variable nueva Porque va a entrar en el dni en false en el dni me lo va a suscribir porque yo estoy poniendo acá dni pero como el padre me lo está mandando vacío se sobreescribe Sí ya ya tenemos el primer cambio fíjense que acá no aparece nada porque está vacío pero si yo cambio y pongo dni ya aparece acá aunque sea variable nueva sí tiqui tiqui tiqui tiqu tiqu y acá por más que le ponga Ricardo no llega nunca a verse sí nunca llega a verse porque cambia Entonces vamos a hacer lo siguiente vamos a aprovecharnos de esto y vamos a poner lo siguiente vamos a copiar esto recuerden lo del First value vamos a poner Entonces eso vamos a poner si si es el First change Perdón no First value si es el First change muestra esto si no entonces eh mantiene Ricardo por ejemplo No perfecto guardamos vamos a ver si esto funciona Ah perdón tiene que ser al revés me equivoqué si no es el primer cambio muestra y si no Ricardo Ahí está ahora sí perfecto bien Ahora sí Entonces como no es el primer cambio como es el primer cambio pone Ricardo si cambiamos ya pone dni sí acá podemos poner libreta libreta eso aparece libreta y recién apartir sí bien ahí tenemos el engine changes y le voy a proponer algo más vamos a volver como estaba antes esto así y vamos a hacer lo siguiente vamos a borrar esto de Ricardo V a poner acá dni como antes Bien voy proponer lo sig vamos a poner un enif Entonces vamos a arrancar esto en vacío todo esto en vacío y vamos a poner lo siguiente vamos a poner acá por ejemplo entonces dni bu false perfecto si el V es vacío se vamos a poner acá dis y vamos a poner lo siguiente igual si el value es igual a vacío entonces va a ser true Claro que ser al revés vamos poner así si el value es distinto vacío es true si no es es false sí no sé si entienden acá entonces este moster dni vamos a hacer lo siguiente vamos a poner un en gif acá a este sí a poner enf en moster dni entonces directamente no se va a mostrar el dni Entonces ahora vamos a tener la siguiente ventaja si no seleccionamos dni no se va a mostrar ahora Una vez que seleccionemos se va a mostrar directamente con la información porque es la primera vez si bien Es la primera vez que se muestra antes no se mosta porque no estaba sí tiqui tiqui tiqui ahora no podemos salir de esto porque no tenemos una forma de salirnos Pero bueno Esta es una buena forma de de de ver también un poco el ngif Cómo funcionaría en este caso abajo una suscripción Sí bueno Esto me parece más que suficiente para los ciclos de Vidas Así que vamos a cortar por ahora por acá y vamos a ir a ver http service para poder hacer llamad apis y ahí vamos a ver un poquito más en profundidad las suscripciones Y cómo hacer l eh on destroy de forma correcta si bien AC ahora lo vimos un poquito por arriba simplemente poniendo un consol cuando hagamos las llamados a Api sí nos va a servir muchísimo muchísimo muchísimo para poder hacerlas de suscripciones a las llamadas http Así que nos vemos en la siguiente sección vamos con una sección increíble vamos a poder conectar por primera vez el Front end con un backend o el frontend con una aplicación de terceros a través de una Api y Qué es todo esto vamos a ir viendo poco a poco En las siguientes diapositivas y te voy a explicar Punto por punto Pero podemos por primera vez empezar a conectar nuestro frontend con algo más así que vamos por ello primero principal hay que saber qué es una Api porque es lo que va a conectar entre una cosa y otra sí las apis interfaces de programación de aplicaciones o application programming interfaces por sus siglas en inglés se utilizan para permitir la comunicación entre diferentes sistemas de software son conjuntos de regas y definiciones que permiten que aplicaciones y servicios Se comuniquen entre Sí nosotros lo que vamos a utilizar para poder comunicarnos con aplicaciones de terceros o backend va a ser apir Rest Así que vamos a por ello consumo de apis para qué sirven integración de servicios las apis permiten que diferentes servicios web se integren entre sí por ejemplo tu aplicación puede utilizar la Api de Google Maps para mostrar mapas la Api de Twitter para mostrar tweets etcétera acceso a datos externos las apis facilitan el acceso a datos y recursos que reciben en servidores externos puedes utilizar apis para obtener información de base de datos servicios en la nube u otros recursos en línea interacción con plataformas sociales muchas plataformas sociales como Facebook Twitter Instagram proporcionan apis que permiten a los desarrolladores acceder a funciones específicas de estas plataformas como publicar contenido o recuperar datos de perfiles de usuario desarrollo de aplicaciones móviles las aplicaciones móviles a menudo utilizan apis para conectarse a servicios de la nube y acceder a funcionalidades específicas como notificaciones Push almacenamiento en la nube y autenticación automatización de procesos las apis permiten la automatización de procesos al permitir que sistemas diferentes se comuniquen y compartan datos de manera eficiente por ejemplo una empresa puede tener un sistema de gestión de inventario que se comunica a un Api de proveedores para realizar pedidos automáticamente cuando se agote el stock esto por ejemplo puede ser booking o puede ser alguna de estas empresas que ofrece hoteles constantemente se comunica a través de apis de los hoteles distintos y ven si hay por ejemplo disponibilidad de de habitaciones o no desarrollo de aplicaciones web las apli iciones web modernas a menudo utilizan apis para cargar datos de forma asíncrona lo que mejora la velocidad y eficiencia de la aplicación Esto es lo que vamos a estar haciendo nosotros vamos a estar llamando a través de apis a información de terceros o de bacen ya vamos a verlo microservicios en arquitectura de microservicios los diferentes componentes del sistema se comunican a través de apis lo que permite la escalabilidad y la flexibilidad en el desarrollo y mantenimiento de aplicaciones esto un poco quiere decir que entre microservicios se comunican eso un poco más por ahí de backend pero también pasa en el microf frontend o sea entre entre micr frontend nos comunicamos a microservicios también a través de apir Rest ya vamos a verlo también un poquito Cómo se usa primero y principal como siempre hay que importar el módulo http client modu porque nosotros somos el cliente Sí vamos a consumir sí asegurate de que V import entonces http client modu en tu módulo principal Por lo general en el app. modle. test nosotros este módulo tenemos que incorporar en imports Sí en nuestro módulo principal para que la funcionalidad http que es el protocolo con el cual nos vamos a comunicar a través de internet lo podemos utilizar en nuestra aplicación web sí como usarlas lo vamos a utilizar a través de un servicio fíjate que acá te dice cómo hacerlo con el angular cck crear un servicio para manejar las solicitudes http puedes crear un servicio Dedicado para manejar todas las llamadas a la Api usa el click de angula para generar el servicio como acá lo vemos y acá en el servicio generado por el clip de angular podemos ver que tenemos primero principal la base de la URL normalmente acá dice Api URL pero yo pu suelo poner base URL porque es la base y después se usa el endpoint que es la parte del final en el constructor inyectamos el http client fíjense que estamos incorporándolo y cuando hacemos get post put y delete Recuerden que que son los métodos para poder comunicarnos a través de apir Rest eh vamos a utilizar fíjense el dis http que es la variable de la inyección Y ahí utilizamos el método get método post método put método delete también está el Patch para los que no conozcan el get es para pedir información el post para poder postear información mandar información el put para editar una información que ya esté en la base de datos o en la en el servicio y el delete para poder borrar un dato específico a través de un ID vamos a ver que get y post suelen tener la misma URL formada en este caso fíjense que está distinto si dice datos Y enviar datos pero normalmente suele ser que el get all o sea lo que trae todo suele ser igual al post y el get individual suele ser igual al delete y al al put sí Entonces tenemos cinco grandes grupos suele ser get all y post suelen tener en la misma URL y get individual delete y y put suelen tener la misma URL barra y el ID con el que se identifica lo que queremos traer editar o borrar Sí ya vamos a verlo un poquito más en profundidad Cómo usarlas también hay que ver cómo incorporar esto en el servicio primero principal inyectamos el servicio en nuestro componente Fíjate que ya estamos en nuestro componente e inyectamos el servicio que hicimos recién O sea hay doble inyección en el en el servicio inyectamos http client y en el componente inyectamos el servicio y acá ya podemos usar un observable fíjense que acá nos suscribimos porque acá devolvemos un observable Sí en el get fíjense que devolvemos un observable Entonces nos podemos suscribir desde el componente y simplemente esperamos a que nos traiga la información y por qué usar un observar y y un y un subscribe porque la información no viene inmediatamente Esto no es síncrono es asíncrono Por qué Porque estamos pidiendo el dato a un backend o a un servidor y eso no es inmediato demora unos segundos o unos microsegundos al menos en darnos la información y si la aplicación espera normalmente se rompe si es síncrono tenemos que esperar hac que la aplicación sepa que va a ser asíncrono y que espere entonces de esta forma espera y está suscrito los cambios y cuando llegan hay dos formas de solucionarlo si es positivo a través del next por ejemplo en este caso va a ser un conso loog podría ser otra cosa mostrarlo en pantalla etcétera Y si da error También tenemos que manejar el error porque Recuerden que si hay un error nosotros no podemos decir Uh hubo un error explota la aplicación no tenemos que mostrarle al cliente un error pruebe nuevamente más tarde escribió algo mal hay muchos errores 400 por ejemplo es que el cliente puede haber escrito algo mal por ejemplo un nombre con con pocos pocos caracteres o uso símbolos que no que correspondían siempre hay que tratar de evitar que eso pase haciendo la experiencia de usuario mejor por ejemplo evitando que el cliente llegue a a mandarlo que ya en la en la pantalla le indique cómo sea el formato pero en el caso que llegara a suceder de que manda algo que no corresponde o una a un usuario que está duplicado que eso claramente no podemos saberlo del frontend el backend nos va a devolver 400 y el mensaje de error y se lo mostramos al cliente el usuario está duplicado el mail está duplicado por ejemplo sí En el caso de que de un error 500 que es error de base de datos no normalmente podemos decirle en este momento el servicio no está disponible pero es de más tarde y así con muchas cosas 401 403 etcétera Hay un montón de cosas que nos puede dar por ejemplo 401 es por ejemplo si el cliente no está bien logueado o si están tratando de hackear la cuenta y no está bien el el el el logo va a decir 401 Usted no tiene permisos y normalmente lo que se suele hacer es del loguearte y sacarte de la página 403 forbiden sí un que no tenemos que tenemos prohibido el acceso a ese método puntual 405 por ejemplo es que uno está tratando de hacer un método a una URL que no existe Por ejemplo si queremos hacer un post a dame los datos a lo mejor si dame los datos solamente es un get Entonces te va a dar eso y así hay que ir aprendiendo a leer los errores cualquier cosa En mi Instagram en mis redes siempre posteo cóm leer estos errores y Seguramente se lo voy a dejar acá en la descripción y bueno esto ha sido todo vamos a verlo un poquito en código sí como hemos visto antes teníamos una tabla de productos Sí así que vamos a aprovecharnos un poco para poder utilizar esto que ya habíamos hecho para rellenarlo con algo de información eh de una Api falsa vamos a buscar en internet una Api de productos y vamos a llenar esto y si hacemos clic en detalle vamos a llenar esta información también con información propia de la Api que consumamos sí y también de paso le vamos a dar un poquito más de forma porque esto quedó un poco estándar no así que bueno vamos a ir un poquito al código vamos a ir acá y podemos ver que tenemos acá productos vamos a ver vamos a creer de crear una carpeta que se llame service Sí para poder hacer nuestro servicio pero vamos a hacerlo acá en en App sí acá arriba perfecto Services y acá dentro es donde vamos a hacer nuestro nuevo servicio cómo hacerlo vamos a abrir la la terminal me voy a abrir acá otra terminal podemos tener varias terminales y acá lo que voy a hacer es un ng generate service y le voy a poner Services que es donde está la carpeta Services barra y acá vamos a incorporar el servicio nuevo Entonces vamos a poner por ejemplo eh Vamos a ponerle Vamos a ponerle Api nada más entonces se va a crear un appi service y con eso vamos a hacer todo lo que hemos visto en las diapositivas para poder consumir un Api vamos Buscar una Api de productos y vamos a consumirlo y vamos a llenar Nuestra pantalla y con esto ya vamos a tener la información suficiente después para poder hacer los trabajos prácticos que tengo en mente Sí ya está creado vamos a cerrar esta y vamos a dejar esta que está en este momento levantada o por las dudas vamos a tirarle y volver levantar porque por ahí el servicio no se incorporó el módulo en tiempo real Así que la vuelvo a levantar cierro esto para que sigamos viendo un poquito y vamos al servicio tenemos el servicio y esto que es para hacer testing lo vamos a borrar momentáneamente nos vamos a quedar solamente por este sí ya que testing no vamos a ver en este curso pero ya lo vamos a ver más adelante en algún otro cursito de testing bien acá el primero principal tenemos que hacer varias cosas primero tenemos que poner la base URL Sí vamos a poner entonces private base URL y vamos a poner acá entonces la URL acá me dice cualquier cosa por ahora vamos a dejarlo así porque me estaba olvidando de que en el app modul nos tenemos que incorporar También aparte de los formularios que están acá habíamos dicho que http client modu y acá arriba tenemos que hacerlo mismo import http Cent mod from common http vamos a comar un poquito el código y listo acá Me falta una coma y acá vamos a ver qu me sugiere escribir copilot no dice nada Ahí está para hacer peticiones http viste ni siquiera lo tengo que comentar yilot me ayuda Bueno ahora s ya vamos a tener el módulo htp client disponible para poder utilizarlo acá bien base url cuá usamos vamos a tener que buscar un Api vamos a buscar un Api de productos vamos a poner entonces appi fake products y fix Store appi les parece vamos a poner acá y acá tenemos vamos a leer la documentación y vamos a ver cómo usarla y acá nos dice Esta es la la URL base vamos a copiarla Sí tuki y ya tenemos nuestra URL base bien qué más tenemos que incorporar entonces la inyección de dependencias de http client para poder utilizar sus métodos y así Llamar a las apis recuerden acá No hay fetch como en javascript se hace a través de http client Sí entonces ponemos private Vamos a ponerle guion bajo http client sí esto le pueden poner el nombre que ustedes quieran pero yo suelo usar con guion bajo que es la forma en la que sabemos que es un inyección Y acá ponemos http client y lo incorporamos de como http s ya tenemos disponible esto para poder utilizarlo y acá vamos a crear los métodos por ejemplo acá copil ya me está eh Me está ofreciendo hacer get products que vendría a ser como un get all si de httpclient.get dis baseurl si vamos a ver cómo funciona porque no no directamente puede ser así get all products funciona así justamente Así que esto está bien pero hay un par de cositas que yo quiero agregar primero principal que devuelve un observable sí y que de Ese observable nos va a devolver un tipo product Vamos a ponerle I product porque va a ser una interfaz ya vamos a crearla esta sí tenemos que crear una interfaz de lo que nos devuelve y por otro lado También acá el get va a ser de I product s y cerramos tanto este como este no existen Por lo cual lo vamos a tener que crear vamos a tener que crear un interfaz s vamos a guardar esto y vamos a ir a models que no tenemos ninguna carpeta de models Así que vamos a crear una acá vamos a poner models y acá si vamos a crear la interfaz para ello vamos a poner acá un archivo nuevo vamos a poner por ejemplo product model.ts y acá simplemente poner un export interface V a poner I product y acá tenemos que poner Qué tipo de de información nos trae acá imagina que puede ser este pero no estamos muy seguros Cómo estar seguros bueno buo acá vamos a ver con algo que no hemos visto hasta ahora pero es muy importante que es postman vamos a abrir postman Recuerden que lo habíamos instalado al principio o tenía que instalarlo para este clase y ahora vamos a ver cómo funciona para poder tomar lo que nos devuelve el servicio y armar una interfaz sé que muchos muchos de ustedes quedaron desilusionados que yo les dije instalen postman y no lo podemos ver en en javascript ahora lo vamos a ver sí bien acá está postman acá fíjense de que ustedes pueden estar logueados y no me logé acá porque tengo un montón de cosas enormes y sería un lío para ustedes tener todo acá mis cosas personales por lo cual no me logé y está vacío ustedes si crean su propia cuenta todo lo que hagan va a quedar guardado acá sí Pero qué es lo que yo quiero hacer voy a poner con el signo más y acá vamos a poner la URL que necesitamos o que queremos que vendría a ser Entonces esta sí bien Entonces tenemos el método get vamos a poner la URL a la cual vamos a estar consumiendo y simplemente con eso como no necesitamos ninguna autorización porque esto no va tokenizado ni ni tiene ningún tipo de autorización va a funcionar si acá yo me corro s un poquito me voy a poner acá un rato real tía que mirar al revés pero no importa a ver si puede poner al revés Ahí está mira ahora estoy mirando bien ahí estoy mirando usted Mira eh estoy mirando estoy observándolo có cómoo veo el get Bueno si toco Senda acá fíjense que me va a devolver todos los productos sí fíjense Acá está qué devuelve devuelve un array ver o sea esto es un Jason por supuesto devuelve un array de objetos tipo producto Cómo podemos hacer para hacer un interfaz rápida de esta les voy a mostrar otra cosa que no hos visto hasta ahora ahora me vo a volver a dar vuelta ti y me pongo acá eso y acá vamos a ver quick pongan quick iio y acá les va a salir esta esta página acá vamos a poner permitir desconectado va a salir esta página que nos va a permitir hacer interfaces de forma muy rápida ponemos acá Open quick type ponemos productos fíjense acá yo ya lo había hecho pegamos acá sí ponemos acá typescript sí y ponemos interfaces only esto justo estaba seteado porque yo ya lo había probado pero básicamente cuando entren acá tienen que seleccionar acá poner producto acá poner typescript y acá interfaces only Y de esa forma fíjense que al pegar esto vamos de cuenta que esto no está fíjense que acá no va a funcionar Cuando peguemos esto se forma esta parte que es la interfaz de producto la interfaz de categoría Fíjate que es un un enumerado y la interfaz de rating copiamos esto y lo llevamos acá al modelo lo pegamos y acá dice I producto pero yo lo que quiero es I product sí acá también lo podría haber puesto acá y product Sí para que sea más fácil lo copiamos y ya tiene la la nomenclatura que yo quería yaa que este es como el título Sí este es el título Este es el formato en el que viene que quiere consum Y acá es lo que devuelve que devuelve una interfaz de tipo typescript sí Qué es un enumerado Ya lo hemos visto en typescript así que cualquier cosa si no saben que es un enumerado vayan al curso de typescript que ahí lo explico pero básicamente las categorías pueden ser alguna de estas cuatro y eh el rating también es un una interfaz que puede ser de tipo número y de tipo count number o sea son eh es otro objeto con con dos datos más así que en principio lo que vamos a hacer es incorporar esto y listo guardamos entonces e product es lo que vamos a estar observando y también lo que vamos a recibir de este servicio que estamos consumiendo vamos a incorporarlo tenemos que poner control espacio y ahí al hacerle clic lo lo trae del modelo guardamos y ya tenemos el get product Vamos a repasar un poquito postman también postman qué hace es un cliente Sí o sea es como como si fuera un frontend si esto Nosotros también somos un cliente y consume backends o apis en este caso yo le pongo la URL Sí sí y hacemos un método el método get de esto me trae un getol me trae toda la información que estamos consumiendo y para qué nos sirve esto nos sirve para no hacer eh el frontend no hacer la aplicación sin antes saber qué es lo que lo trae si nosotros pusimos hacer la aplicaciones ciegas y le pusimos por ejemplo en vez de title le pusiéramos título en vez de Price le pusiéramos no sé moneda en vez de descripción le pusiéramos Qué te parece en vez de categoría le pusiéramos tipo en vez de imagen le pusiéramos eh o o ton en castellano por ejemplo entonces con esto al hacer en el postman un getol podemos ver qué es lo que nos va a traer y anticiparnos Y ya saber qué poner en nuestro frontend para que funcione y también podemos por supuesto si estamos en angular o alguna aplicación de tipado fuerte eh o react con typ por ejemplo también podemos adelantarnos y utilizar el postman para hacer nuestras interfaces como acabamos de hacer Vamos a ver que también aparte del get vamos a hacer un post sí fíjense que acá en lo que es la F Store nos permite hacer un un get a single product este también es muy importante Este es un get pero fíjense que individual y acá como yo les comentaba viene el ID fíjense que sigue siendo el mismo endpoint pero agregando el ID y vamos a ver que el get all y el post son iguales las urls y el get individual el put y el delete también con el ID por ejemplo ponemos acá y fíjate que este uno lo podemos reemplazar por dos puntos ID y acá poner el uno para que no no para no poner acá cosas estáticas las ponemos con dos puntos ID para que sea variable y acá Le ponemos el el valor estático sí ponemos acá y fíjense que nos va a darer solamente el producto número uno no es un array lo que me devuelve sino que es puntualmente un producto Entonces es un get puntual Entonces si nosotros vamos acá podemos a pensar esto nos va a traer un solo producto o nos va a traer una aray ojo nos va a traer una array se vamos a ir corrigiendo un po poner una raya acá y una raya acá sí Y Cuando hagamos el get individual por ejemplo get product by ID como acá me sugiere mi amigo copilot ahí está perfecto ahora sí me TR uno solo y uno solo y ponemos el ID sí que nos trae de esta forma es un number probablemente si llegar a ser un String hay que hacerle un casteo si no va a dar error acá si no le podemos poner una un una tubería y poner String acá Sí también se puede hacer con un Pipe de esta forma y y acepta number o est pero en principio vamos a trabajar con number vamos a tratar de hacer lo posible trabajar con number Entonces tenemos el get individual lo pasamos por postman y funciona no se nos va a devolver un solo objeto y ya lo incorporamos acá también vamos a tratar de hacerlo otro ya que estamos si bien es muy difícil que hagamos un post en esta en esta etapa quiero mostrarle Cómo se hace todo para que ustedes sepan cómo funciona bien Vamos a agregar Entonces los otros métodos fíjense que el post vamos a tratar de hacerlo de la misma forma a poner acá y acá y un post sí fíjense que entonces los dos son iguales Ah perdón acá me copié mal Así fíjense que ahora son iguales el get y el post van a ser iguales fíjense que cuando yo vaya acá la documentación si vamos por ahí Ah mira acá te permite también mandar un query param que es descendente o ascendente para que se se haga un ordenamiento podos aplicarlo la verdad que me gustó eso a ver ver Vamos a ponerle acá entonces un query param Vamos a ponerle signo de pregunta porque después el signo de pregunta vienen los query params dice sort Sí igual y acá viene ascendente o descendente pero como no queremos acá que esta parte se forme de forma estática o sea poner desk acá yo lo que prefiero es utilizar acá abajo Sí si bien acá se va a ver así yo prefiero siempre tener acá las key value para poder usarlo desde acá si ask Sí entonces Acá está lo mismo si hubiera otra cosa tiqui ponemos acá si y fíjense que es arma sola acá vamos a borrar de por sí pero bueno sepan de que es ascendente o descendente acá y los query params nos permiten controlar el resultado en este caso cambiar el orden vamos a ver descendente Ah ver vamos a poner Send acá voy a cambiar de lugar para para poder ver fíjense que por ejemplo descendente trae primero el 20 después el 19 después el 18 etcétera sí podemos incorporarlo no hay ningún problema problema vamos a ir al código acá sigo bien fíjense que acá podremos hacer lo siguiente podemos aceptar sort Si y sería de tipo String y acá lo Podemos agregar de la siguiente forma podremos poner que todo esto sea vamos a cortarlo poner btic y acá podemos poner signo pesos y así para que sea una interpolación y al lado poner barra perdón signo de pregunta y acá me dice lo que lo que estamos esperando y fíjense que vamos poniendo lo que tiene que estar escrito que en este caso era signo de pregunta sort igual lo escribimos acá sí Y acá le ponemos s ahora qué pasaría si esto no es obligatorio acá nos viene nos viene ese debate si si esto va vacío vamos a ver qué pasa si nosotros ponemos vacío esto puede fallar a ver vamos a ver no falla en este caso no falla pero podría fallar entonces algunas veces acá Hay que meterle un poquito de lógica y poner por ejemplo si esto es signo de pregunta o sea si no viniese si no viniese podemos por ejemplo poner conort igual así Si en el caso de sort pasa todo se llama acá igual está bien vamos a poner así con sort y ponemos si sort o se si esto existe tenemos que devolver todo esto vamos a cortarlo o vamos a copiar primero sí y nos falta las BS tiki y claro acá est duplicado no se puede llamar Igual vamos a poner por ejemplo sort param o vamos a ponerle params mejor no vamos a ponerle params para que sea vamos a resolver todo acá podemos poner el signo de pregunta afuera no hay ningún problema podemos irlo Armando pero en principio vos vamos a hacerlo simple para que ustedes entiendan que se puede aplicar lógica acá Entonces params vamos a borrar sort acá y vamos a poner par sí entonces tendríamos si s existe Entonces te agrega Sign no de pregunta s que se si no existe te devuelve vacío entonces queda base URL vacía de esa forma si en el caso que acá diese error que no dio error pero podía ser que no acepte vacío acá el query param o sea el No acepte vacío podríamos manejarlo acá esto ahora lo vamos a borrar la idea es que ustedes sepan que se puede agregar un poquito de lógica por todos lados para que ustedes eh sepan de que de que no tengan miedo que se pueda hacer de esta forma vamos a guardar y acá vamos a sacar el s para no confundir poner y nos viene de forma ascendente bien Vamos a ver más nos ofrece La falsa podemos ver acá que voy a cambiar de lugar nuevo nos ofrece entonces categories fíjense que acá podemos consumir las categorías vamos a hacerlo total ahora Estamos practicando hay ningún problema hacer categories de goris Acá hay que aceptar algo ahora vamos a verlo de nuevo acá acá No hay que mandarle nada fíjense directamente se llama directo Entonces no no vamos a recibir nada también vamos a a esperar un observable pero en vez de tipo Ani va a ser tipo category sí category perfecto y también así perfecto y acá prácticamente me lo resolvió de forma automática copilot que básicamente es poner barra categor Sí entonces tenemos las categorías entonces este devuelve devuelve aay devuelve en realidad un observa ver devuelve un observable de tipo o sea de productos y este devuelve observable de un producto y este de observad de categorías perfecto vamos a seguir haciendo un poquito más totales para practicar después aplicamos solamente el get all no hay problema o el get individual esto es Agregar un nuevo producto fíjense que se puede agregar un nuevo producto esto obviamente se hace con un post Sí entonces básicamente hay que mandarle un Jason Pero esto se hace distinto acá en angular Así que fíjense que lo primero principal que yo les quiero mostrar es esto fíjense que acá es igual que el getol O sea si nosotros vamos al postman van a ver que es igual que el getol Sí entonces acá para poder hacer un post tenemos que tocar Body porque hay que mandarle algo tenemos que mandarle nuevo producto poner raw Jason porque Recibe un Jason sí acá claramente te está mostrando que recibe un Jason en general las Happy Rest recién un Jason y acá vamos a agregarle esto sí que es el Jason que quiere que mandemos vamos a agregarlo acá vamos a poner un poquito más abajo vamos a agregarlo acá sí vamos a acomodarlo un poquito y fíjense que nos faltan un par de cositas para que sea un Jason la parte de de las Ski tiene que llevar doble comillas y acá también tiene que llegar doble comillas sí acá me quedó una category electronic quo mal escrito y ahora sí fíjense que ya toma color porque el Jason ya es correcto sí bien Si nosotros voy a acá ti ahora sí estoy viendo bien si nosotros acá hacemos un post fíjense se agrega y nos da 200 200 que está correcto Sí a ver la realidad es que este 200 está un poquito mal porque normalmente cuando se crea un nuevo objeto se suele usar 2011 que es created pero 200 está bien Que 200 es básicamente Okay 2011 es created eso sería lo más correcto pero 200 quiere decir que nos está dando Okay está bastante bien también No se preocupen que di 200 quiere decir que se que se se logró el objetivo y nos devuelve F fíjense que nos devuelve el ID 21 o sea nosotros mandamos una cosa sin ID y nos devuelve el ID 21 que es el que sería del ID 20 que es el último en el getol para que ustedes más o menos vayan viendo cómo funciona también del otro lado del lado del backend Entonces ya tenemos el post vamos a tratar de hacerlo acá public entonces post si product vamos a recibir entonces un product de tipo I product nos va a devolver un observable de tipo product perfecto y nada acá abajo vamos a poner return Y fíjense que ahora cambia vamos a poner dis http client post O sea ya no es masg como estos de arriba es un post Y también vamos nos va a devolver un product y tenemos que poner la base URL porque es igual que el get con el producto y por qué es coma producto porque nosotros tenemos que mandarle el body A diferencia de acá como se ve que lo hacíamos en Java recuerdan que en javascript lo hacíamos así si esto lo hacos así en javascript que se ponía el Jason stringify creo que también lo vimos así en react Bueno pero obviamente si están viendo el curso de angular muchos no van a haber visto la react pero react nosotros lo trabajamos con javascript y lo manejábamos así A diferencia de de esto que se hace de esta forma nosotros no utilizamos fetch en angular sino que utilizamos el http client y simplemente con mandar coma producto el http client lo resuelve fíjense que angular hacer un framework resuelve much de las cosas que nosotros tenemos que hacer un poco a mano sí fíjense todas estas promesas no no las usamos sino que usamos un observable ya vamos a ver cómo utilizar un poquito más vamos a tratar de hacer eh el resto de las cosas que nos ofrece por ejemplo acá update a product o sea actualizar un producto es un put fíjense que acá vuelve a ser igual que el get individual con el con el ID o sea si nosotros vos acá es muy parecido este muy muy parecido a este Pero cuál diferencia hay que sí Envía un Body Entonces vamos a ver si lo podemos utilizar primero en el postman vamos a agregarlo vamos a poner un put vamos a a fijarnos que acá va a funcionar igual que acá vamos a copiarlo y pegarlo vamos a poner el ID por ejemplo el s y también necesitamos mandar un Body vamos a poner Body rw Jason y acá nos vamos a traer por ejemplo el que nos ofrece acá s fíjense que acá hace un Jason stringify Por lo cual esto lo pasa comilla y todo eso que estamos haciendo a mano vamos a copiar pegar acá le vamos a tener que dar también un un pequeño arreglado a mano ponemos comillas dobles comillas dobles comillas dobles y al último comillas dobles y acá va electronic también eh tenemos que poner coma coma coma coma y ahí está acomodamos un poquito el coso y ya tenemos entonces eh acá arriba tenemos el id7 o se vamos a estar cambiando el si y estamos mandando el body como nos decía ponemos 100 y si nos da 200 quiere decir que está todo s super bien Sí vamos a tratar de llevar esto el código lo mismo public put product acá nos ofrece básicamente lo que estamos esperando y en el reor vamos a hacer entonces return de this- htp client punp acá cambia también fíjense y bueno acá básicamente nos resuelve Qué diferencia Entonces tenemos fíjense que estamos buscando el product producto ID acá nosotros estamos mandando el ID pero también podría ser que te mande el product y product ID pero vamos a tratar de hacerlo igual que lo hicimos con el get Sí para no confundirnos vamos a poner ID number y vamos a poner product Aparte sí dos puntos I product Sí entonces de estas formas en vez de este producto ID vamos a poner ID sí Yo prefiero trabajar así separando el ID y el product por ahí eh este product lo armo distinto y y no quiero mandar el ID lo armo un bodybuilder que voy a armar yo y a lo mejor el ID no lo quiero poner ahí por lo cual prefiero ponerlo por separado por las dudas sí tener más manejo tener más manejo sobre esto y por último el delete Sí el delete a product Entonces vamos a hacer lo mismo vamos a poner acá vamos a copiarnos esto sí vamos a agregar acá va a ser un delete vamos a poner y acá el ID por ejemplo vamos a poner el mismo siete sí acá No hay que poner ningún Body acá simplemente con esto que ya pusimos igual que el get fíjense que es idéntico al get nada más que cambia el método ponemos en y ya lo elimina claramente esto como una Api fake o sea una Api falsa no lo elimina de verdad Entonces si usted hace un get all de nuevo el siete va a seguir estando no es que que que realmente borra si no imagínate cada uno que me tira mano acá sería un kilombo entonces claramente el si va a seguir estando pero no se preocupen que esto es para que ustedes puedan practicar bien Vamos a tratar de hacerlo en código vamos a ponerlo acá public delete product Sí bueno acá básicamente lo mismo que antes y acá perfecto fíjense que http client delete s entonces básicamente es lo mismo mandamos el ID number igual que en el get product y ya queda eso tenemos Entonces el get all el get product by ID el get all categories el leamos el post product put product product a ver les voy a mostrar otra cosa que puede llegar a pasar vamos a cambiarle un poquito los nombres el get get product ser get all product el get product ID nuevamente suele ser así el get categories suele ser get all categories porque si no sería get category una sola y acá el post product norment puede ser New product si New product acá en vez de put puede ser update product y acá en vez de acá delete product suele ser tamb bien delete product fíjense que pueden ser las dos de las dos formas s no había ningún problema vamos a utilizarlo así para que ustedes se vayan acostumbrando a que es un New product pero es un post un update produ pero es un put delete delete get get all es el get pero de array si no un array y el get individual es get solo Sí podría ser tranquilamente en vez de get product byid get product entonces la diferencia es get all products get product y si no sería get product get product ustedes depende En qué empresa trabajen va puede ser cualquiera de las siguientes formas sí lo importante es que acá no me usen un eni que acá también que no que no omitan cosas que realmente lo tipen para eso estamos usando typescript sí y Listo ya tenemos todo fíjense que acá tenemos cards y otras cositas más sí que nos permite podemos limitar eh resultados a ciertas cosas podemos ordenar las cartas es más Mira acá te permite traer traer tarjetas porque esto no es cartas es tarjetas perdón eh t de tarjetas desde una fecha en particular eh t tarjetas según el usuario la verdad que está muy bueno en este caso si nosotros trabajemos todo eso fíjense que acá Tendremos que cambiar la base URL porque ya cards es distinto entonces la base URL que nosotros definimos acá en vez de ser esta sería sin el products y tenemos que agregar el product en cada uno de estos sí bu no vamos a hacer así porque bueno Esto es una obviamente una práctica y vamos a ir Entonces ahora sí tiki a tratar de incorporarlo vamos a ir a productos vamos a ir acá a product component y nosotros lo que estamos haciendo es poniendo el moqueo si fíjense si vamos acá era un moc sí que decía lavandina eh bota de un litro eso vamos a incorporar en vez de esto así sí vamos a poner Esto entonces dos puntos I product array Y en vez de product list vamos a empezarlo vacío sí perfecto vamos a guardar vamos a hacer entonces la inserción de dependencia vamos a poner constructor sí Y acá vamos a poner Entonces private vamos a poner gu bajo Api service los puntos Api service y ahora podemos utilizar esto para traernos todo esto que habíamos hecho en el Api service ya tenemos todos estos métodos disponibles para utilizar sí Entonces vamos a utilizarlo vamos a utilizar un oninit acá implements init Sí vamos a traerlo esto primero vamos a barrar ya que no vamos a utilizar más el mooc Ya está listo acá vamos a hacer en init y acá vamos a poner dis punto acá Bueno básicamente lo que me dice apis service get all products si que es este y vamos a poner punto subscribe para suscribir no estar escuchando porque esto sí va a llamar a un servidor externo que va a demorar unos microsegundos y y la Data la vamos a incorporar acá si fíjense que I product como estamos esperando un I product No falla si fuera distinto fallaría por ahora igual lo primero que vamos a hacer es hacer un console loog de la Data Sí vamos a guardar esta Data también Le podremos poner un tipado podemos ponerle dos puntos I product así sí para que sea mejor todavía por ahora esto lo vamos a dejar comentado vamos a guardar y vamos a ir Ah claro no puedo dejarlo comentado esto por ahora vamos a ponerlo con el mooc para que no nos dé error y esto lo vamos a poner por ahora en en Sí para que no nos dé error vamos a ir acá y esto es lo que nos interesa no no se fijen en la pantalla vamos a ver lo del conso que esto es lo que nos interesa fíjense que acá nos está trayendo toda la información del eh de la de la Api falsa de acá sí vamos a hacer un actualizar fíjense que nos trae todo Sí actualizamos y nos trae todo tenemos 19 19 Perdón son 20 productos pued empiez a contar desde el cero sí length 20 empieza desde el cero y tenemos por ejemplo ropa de hombre fíjense que acá en categoría electrónicas etcétera etcétera etcétera Así que perfecto quiero mostrar otra cosita la solapa Network sí se lo quiero mostrar también en el cual podemos ver que si hacemos un f5 acá tenemos la información de lo que estamos pidiendo acá en headers estamos poniendo la URL base que habemos hecho o la URL en realidad completa le va a salir acá qué método usamos que es el get que nos devolvió 200 y por ejemplo la la el preview que es la la vista de todo lo que nos están eh mandando la la Api o sea aparte del console loog podríamos chequear lo mismo desde acá eso un poquito lo hemos visto en el curso javascript Así que si no vion el curso javascript vean el curso javascript ahora lo que hay que hacer es tratar de adaptar la pantalla para que lo que estamos trayendo se vea Así que vamos a tratar de hacer eso per principal vamos a volver a poner product acá y le vamos a setear la Data acá vamos a borrar el cons vamos a guardar y posiblemente ya no le gusta porque no tiene name vamos a ir al html y vamos a ir modificando un par de cositas primo principal vamos a tratar de poner las cosas primero producto poner porque está claramente en inglés price y detail vamos a pasarlo en inglés detail Esto va a ser products list of products y acá tenemos la lista de productos y acá tenemos productos con4 si ent vamos a ver que en angular 17 cambia si esto va a cambiar en angular 17 ver un poquito más adelante y acá tenemos el ID claramente sale Pero name no vamos a chequear Cómo era el interfaz vamos a ir un poquito acá hacemos control click para ir acá y tenemos title no dice name dice title si fíjense que ya tenemos alguna diferencia Vamos a ponerle title y acá Está bien Este es el el nombre del producto podemos ponerle title acá pero product es bastante claro Sí title sí bien acá el precio habemos puesto que si salía más de cinco salga rojo pero el precio sale bien vamos a ir guardando a ver si si ya se empieza a ver fíjense que acá no sale en rojo pero ahora que estoy estoy verificando dice title color sí Y nosotros si vamos al ccs dice red color entonces claramente algún problema hubo se nos cambió Así vamos a poner red color acá a poner red color se me cambió Recién me parece que lo pegué mal y ahora si vemos acá está bien Sí vuelve a ser rojo entonces con esto podemos eh confirmar por qué fíjense que un error humano un error mío había hecho que yo pegue acá el title en vez de acá arriba y eso haya haya hecho que fallara entonces yo decía Bueno a lo mejor Esto está viniendo en String y por eso no se puede comparar pero claramente no era el caso sino que simplemente estaba mal el nombre de la clase y ya está funcionando fíjese que la mayoría es mayor a 5 Así que vamos a ponerle por ejemplo mayor a 100 para que no sea tan fuerte ver todo rojo y fíjense que también sigue siendo bastante los elementos V a ponerle por ejemplo más de Vamos a ponerle más de 200 Sí para que no sea para que se vean alguno n más en rojo Perfecto ahí está un poquito mejor sí si no tanto en rojo bien bien me parece que está buenísimo esto tenemos el product price y detail fíjense que claramente product es el más grande pero ahora se tocó detalle fíjense que no funciona bien Sí entonces la idea va a ser entonces hacer al tocar detalle que también está raro porque vamos a ponerle vamos a poner detail sí View detail si no es raro detalle la palabra detalle solo y acá vamos a ir entonces a product product ID como habíamos hecho antes como habíamos hecho en la práctica anterior pero a diferencia de antes necesitamos también hacer un get individual vamos a ir vamos a ir abriendo un poquito vamos a cerrar todo vamos a ir al product detail y mira acá nos hab quedado este archivo vamos a borrarlo que es el archivo de testing no vamos a quedar solamente con estos y vamos a chequear un poquito esto y vamos a pensar un poco primero principal acá tenemos un subscribe que estaba esperando el nombre el número del producto eso por ahora Sigue estando bien Pero cuál es qué es lo que está diferente a antes fíjense que acá dice product list find si y el product list es el mooc entonces básicamente tenemos que cambiar muchas cosas acá vamos a ir de arriba para abajo primero principal vamos a borrar el mooc no queremos tener el mooc ni tampoco la interfaz del moc vamos a poner I product Sí vamos a querer tener la interfaz lo mismo en la product list que vamos tener interfaz nueva no vamos a igualarlo acá a esto sino que vamos a igualarlo vacío y varias cositas primero principal no queremos poner Time out ahora para que para verlo de loading porque realmente va a tener una demora verdadera vamos a poner vamos a acar un poquito el código y vamos a ir de poco bien primero principal me estoy verificando que nos está faltando también incorporar el la inserción de de los servicio entonces vamos a acar un poquito el código y acá vamos a poner private y bajo Api service service lo incorporamos y ya tenemos disponible También acá Ahora sí dis pun apis service punto get product Sí pero uno solo necesitamos vamos a ir a ver el servicio estamos uno solo que sería get product Y tenemos pasar el ID get product está y le tenemos que pasar el ID ahora el ID tenemos no Entonces qué pasa tenemos que ir hacia adentro de este subscribe sí entienden vamos a ponerlo acá y primero principal tenemos que robarnos esto de acá sí vamos a borrar esta línea y ahora sí tenemos el ID lo estamos de dónde sacando de los parámetros de la ruta estamos sacando el product ID sí Y qué pasa Este era un String no es un number entonces lo que tenemos que hacer es castear vamos castear poniendo number acá y acá esto así de esta forma estamos casteo Entonces ya qued un poco complicado esto sería hacer lo mismo que hacer product Y esto no y pasar product acá dentro también si no podemos dejar que sea un String y acá dejar que un String o castear lo acá se pueden hacer muchas cosas eh acá no habría problema de recibir un Stream porque siempre las URL son strings también tranquilamente podríamos poner acá Así un Stream y recibirlo Pero bueno para practicar un poquito de otras cosas vamos a castear y que quede así de paso ustedes se acostumbran un poco la complejidad que puede llegar a verse sí Entonces tenemos get product casteo de esto que es va a dar el el número que mandemos por la URL y esto También tenemos que hacer obviamente un subscribe Sí y lo mismo no vamos a poner Data y product acá me lo está dando y lo que reciba hay que setear en el product list sí product list igual a Data Perdón acá es product solo mil disculpas porque no tenemos una lista acá no no nos hace falta una lista acá Esto del color vamos a dejarlo acá dentro no hay ningún problema y el loading false también lo vamos a pasar acá dentro esto no lo vamos a utilizar al final entonces fíjense que tenemos primero el subscribe del params Sí primero el subscribe del params entonces una vez que el parámetros ya fue leído ya tenemos los parámetros que nos manda por la URL llama al servicio acá podríamos poner tranquilamente next Sí para que sea mejor todavía esto me parece que es mejor todavía vamos a hacerlo de esa forma F vamos a poner next vamos a poner acá el params que va a ser de tipo tipo params de hecho Entonces ahora vamos a repasar tenemos params de tipo params y hacemos un get product mandando elid que para poder mandarlo tenemos que hacer un casteo de Number porque esto es un String y tomamos el el número de la URL sí nos suscribimos al cambio y cuando nos mande la Data la samos acá acá vamos a hacer exactamente lo mismo que antes vamos a poner Esto va a ser un objeto Sí vamos a pasarlo después de este y acá le vamos a poner next dos puntos para poder manejarlo con error acá sí dos puntos y acá va a ser error en y perfecto fíjense que acá me lo resolvió de forma correcta acomodo un poquito y perfecto Sí esto es un kilombo Pero bueno ahí ahí quedó como yo quería Entonces tenemos nos suscribimos Y tenemos el next esto claramente no va a tener un error la suscripción de la ruta Así que podemos no manejarlo si no tenemos que manejarlo acá poniendo coma error Sí bueno acá lo mismo No sí este loading false no pero bueno en principio este error nunca va a pasar porque estamos leyendo una ruta s sería muy extraño que suceda un error acá pero por la duda lo vamos a poner acá Perdón que sea tan complicado esto pero esta es la mejor forma de manejarlo y creo que es lo ideal que lo veamos así entonces tenemos next que vendría ser la suscripción al a la ruta cuando ya esté lista el parámetro entonces va a llamar al servicio get product vamos a vaar el ID que va a estar en la URL y ahora sí esa ese next o sea cuando esté Ok nos va a setear el producto el color va a ser red si el precio es mayor a 5 acá le hamos dicho entonces que va a ser mayor a 200 guardamos Y si ya está todo esto va a decir lfs para mostrar el producto y si hay algún error va a serer un conso por ahora pero podremos manejarlo de otra forma Ya lo vamos a ver sí vamos a empezar a ver un poquito bueno eh nos habemos olvidado que tenemos que modificar también el html fíjense que acá sigue diciendo name y era title Sí title y vamos a pasarlo en inglés price description des description y acá vamos a poner loading vamos a guardar y vamos a ver si si funciona Sí vamos a poner uno por ejemplo este y ya empieza a funcionar mucho mejor sí está bastante fiero esto no les voy a mentir Aunque podremos meter todo esto en una tarjeta vamos a poner bootstrap poner Card porque la verdad que está horrible esto chicos Horrible Horrible Horrible vamos a copiar una Card de acá vamos a tratar de hacer las cosas bien porque la verdad que muy feo A ver vamos a tratar entonces poner esto así y vamos a ver la imagen vamos a poner a ver habí imagen esto que nos trae vamos a ver un poquito acá el Network hacemos f5 y nos fijamos acá si nos trae una imagen sí fíjense nos trae una imagen vamos a utilizarla les parece vamos a poner acá entonces poner interpolación product image s acá en title Vamos a ponerle entonces product vamos hacer interpolación product title title este signo de pregunta es por si viene nul acá tenemos text est la description Así que vamos a poner product punto description y este que es un botón bueno el botón por ahora lo vamos aar vamos a guardar y vamos a ver si mejoró un poco esto loading y aparece acá en el alt también podremos ponerle product punto title sí acá también Le podremos poner la verdad el precio F que ahí apareció podemos ponerle el precio a ver vamos a poner acá sí vamos a ponerlo acá con un h6 sí a poner product price V a poner con la la tubería la el Pipe de currency y este le vamos a poner si les parece el Pipe de de Upper Case así aparece todo mayúscula a ver si parece y ahí está fíjense que acá no le pusimos nos habemos olvidado de poner el loading ent se ve la imagen como rota primero no ahí está fíjense que dice loading y recién ahí carga Sí sigue viendo medio fiero porque está muy grande por ahí podremos poner vamos a agarrar esta esta clase y le vamos a poner algunos atributos para poder achicar un poquito la imagen sea que quedó extremadamente grande está un poco mejor V a borrarle un poquito Si bien la imagen ahora no está apareciendo del todo se ve un poco mejor la tarjeta si si no la tarjeta era muy grande también Es verdad que yo estoy en un monitor muy chiquito para poder darle la clase a ustedes pero está un poco mejor fíjense que así también podemos ver utilizar skill down a ver si ahí está este me gustó más bien me parece un poco mejor vamos a ver sios poner acá a ver y esa Ahí va tomando forma eh costó un poco pero ya va listo perfecto ahora ya tenemos una tarjetita y fíjense que está mucho mejor si vamos de productos tocamos Este ahí está eh se ve mucho mejor si no entra una porquería de hecho podremos centrarlo no vamos vamos a hacer un centrado vamos a hacer algo muy difícil que es centrar un dip vamos a como un poco esto vamos a hacer otro dip Sí vamos a poner dip Sí y vamos a centrarlo cosa que que hace que acá te das cuenta si sabes programar o no Si puedes centar un V poner Center acá y acá V a poner punto Center le vamos a poner entonces display punto Flex y acá vamos a ponerle entonces justify content Center guardar y ya está perfecto Sí podos ver entonces que products y ahí está s esta Lista de productos también está como muy hacia los costados vamos un poquito también vamos a hacer lo mismo acá vamos a cortar esto V a poner un div a poner un Class container perfecto no perdón cl container como un poco de código guardamos y fíjense que está un poco mejor sí bien Vamos acá y aparece esto vamos acá y aparece esto vamos acá y aparece esto vamos acá aparece tiki y bueno podremos hacer un montón de cosas más Pero la verdad que yo estoy muy contento de cómo quedó esto la verdad que va como piña a ver esto tiki tiki esa tiki tiki va cambiando ahí ti La verdad que quedó buenísimo eh formato inválido Ah nos falta un poco de Home la verdad no pero la verdad que estoy muy contento y ya tenemos en cuenta de que estamos Llamando a un servicio de verdad por supuesto post put y otras cosas más se los dejo a ustedes para que lo investiguen pero también lo vamos a repasar seguramente en alguno de los trabajos prácticos que vamos a ver a continuación Así que ha sido todo esto por esta sección nos vemos en la siguiente sección vamos con una de las secciones favoritas mías del curso por muchos motivos una porque me encantó todo lo que trajo angular 16 a angular porque trajo un montón de cosas que la gente venía reclamando hace muchos años y se incorporaron y ni hablar de angular 17 que vamos a ver después a continuación pero no solamente por eso sino que también fue lo que me dio llave a ser uno de los speakers principales en Ada 13 que fue un evento enorme que se hizo en en la usina del arte en donde pude estar con bryce maé también pude estar con Hola mundo que es Nico su no sé cómo se dice en alemán pero tiene un nombre muy difícil y con Lucas dalto la verdad que estuvo espectacular y bueno justamente a mí me habían invitado originalmente para hacer un workshop sobre hw 16 y final finalmente terminé hablando como speaker principal junto con esos cracks la verdad que la pasé bomba Así que le tengo un poco de cariño a esta sección y la voy a compartir ahora con ustedes sí signals Esto fue lo primero y principal que explotó la redes o por lo menos las redes de los nerds como nosotros cuando salió signals originalmente había sido una incorporación un feature de solid js que era para manejar todos los observables y primero se incorporó en react y después eh ahora en angular pero ojo mucha gente angular le copia tod re angular le copia to no Le copió solids y también cop tod se porqueo es Open source claramente chicos basta hacer competencia usen los dos y listo los TR los cu Sign una nueva forma de gestionar cambios de estado de aplicaciones después tenemos pasamos final de la diapositiva vamos a ver un poquito más deslo De qué trata Sí por eso es que voy un poquito rápido con signals para poder viendo todas las características que trajo angular 16 y el último signals vamos a hablar como un capítulo completo Sí hydration mejoras en el renderizado el lado del servidor para un rendimiento óptimo en el navegador del usuario final en este sentido digamos lo que es server Side rendering hay que tener cuidado porque obviamente todo lo que se hace el renderizado del lado del servidor es es mucho más rápido pero y obviamente le le consume menos recursos al usuario porque el usuario no tiene que poner su computadora su navegador su Ram todo para para para que se render la página pero sí obviamente al ser del lado del servidor se vuelve mucho más tosco entonces hay que tener cierto grado de cuidado de dónde poner las cosas Si del server Side o del client Side client Side es el lado de la persona que usa la aplicación Sí después Stand Alone components simplificación ent relación entre componentes y módulos en angular recuerdan que yo les he dicho que el módulos es algo que no se ve pero divide la aplicación y componentes sí divide la pantalla pero sí se ve bueno Stand Alone components es una mixtura de esto son componentes que funcionan como mini módulos Entonces no tenemos que ir haciendo esa ese árbol Recuerden que yo les había dicho que era como un árbol que aparecía primero en los módulos grandes y después se se vien los módulos más chiquitos y los componentes a su vez iban abajo de los módulos el stand Alone components hace que nosotros podamos poner componentes como micr módulos y no no tengan que incorporar nada del resto simplemente están sueldos e incorporan solamente lo que les hace falta de los módulos principales sí podemos ver acá que en el caso de usar un componente standalone ponemos standalone true dentro del el decorador component y además de poner el selector el template y la URL podemos poner el standal Y fíjense que ahora el import en vez de hacerlo el módulo directamente importarnos todo por como por herencia digamos que el mó le da todos los componentes en este caso vamos a incorporar puntualmente las cosas que queremos usar por ejemplo ng4 la directiva ngif la directiva en este caso estos cuatro son mat Card mat m qué s yo son propios de angular material que ya lo vamos a ver en alguno de los trabajos prácticos y fíjate que se incorporan directamente acá y a su vez el componente se incorpore en la parte de imports ojo con esto acá cambia Fíjate que si es Stand Alone se incorpora en la parte de imports o sea como si fuera un micro módulo sí injection esto cambia un montón vion que nosotros para hacer una inyección de dependencias utilizábamos el constructor esto ya está disponible de angular 15 pero claramente eh desde angular 16 mucha gente lo vio como una de las incorporaciones Así que también básicamente en vez de ponerlo en el constructor Como private por ejemplo http do pun http client utilizamos la injection que vamos a ver que es muy fácil de utilizar en vez de antes como se veía acá se hace así private servicio igual inject Sí o sea se hace una variable y se inyecta mucho más fácil input require esto es muy importante vieron que cuando hacemos el padre le pasa cosas al hijo antes digamos le podemos pasar o por ahí podía ser que le pasara nul o vacío undef esto podía pasar hoy en día con angular le podemos poner require que sea obligatorio y en el caso de no pasarlo que de un error de compilación entonces a decí Pero esto qué va a dar errores claro va a dar errores pero va a dar errores en en la parte de compilación para que uno corrija su código y nunca tenga problemas o nunca tenga riesgo de que el error le de al cliente Imagínate si el error da en producción es mucho peor que te dé error a vos entonces con esto el error va a saltar antes te va a saltar a vos Y vos vas a poder solucionarlo en la parte de compilación y jamás el cliente se se encontraría con un backg de producción fíjense acá uno le pone require true si que el input va a ser requerido y si nosotros no le pasáramos le va a decir así decir acá no tiene puesto no dice por ejemplo Data source no pone dat source Acá está vacío y dice el input dat source es requerido entonces acá nos faltó poner dat source simplemente control click acá vamos y lo ponemos muy parecido al anterior nada más que con buan antes si nosotros le pasábamos un true or false de tipo String fallaba decía se espera un buano ahora esto no hace falta de trabajarlo más simplemente se le pone un transform boolean de esta forma transform bullan Sí y ahora directamente va a poder recibir un String y no se va a romper por ejemplo antes esto es antes antes Fíjate que si vos le pasabas un String fíjate que acá hay doble comilla fallaba Y decía el tipo de Stream no es asignado wen ahora con esto no va a darte más error o sea esto es antes sí a partir de usar esto este error no existe más Esto sí está un poquito robo de react no les voy a mentir las etiquetas autoconclusivas Antes había que sí abrir y cerrar Y a partir de angular 16 con la barra sola ya ya funciona fíjense que antes era appen Child por ejemplo este es el Pep hijo digamos eh Acá está lo que le faltaba al ejemplo anterior Y fíjate que había que cerrarlo V que hay que cerrar la tag igual que en html bueno en este caso ahora simplemente un solo tag con barra ya funciona y esto nos ahorra código siempre ahorrar código es importante importación dinámica de enrutador esta es otra cosas muy importante nueva función en angular para obtener información del enrutador sin inyectar activated rot en el componente Recuerden que por Para ahí Para poder eh solicitar la información de la del ID nosotros hacíamos una suscripción a la activity Root fíjate que ahora se puede inyectar de forma dinámica s ya vamos a ver eng destroy flexible Recuerden que cuando vios los ciclos de vida destroy nos describamos ahora digamos se hace con una inyección si mucho más fácil primero usamos destroy rif para ver la referencia de lo que queremos destruir y se utiliza de una forma mucho más fácil vamos a verlo ahora en código Fíjate que en el constructor por ejemplo directamente ponemos inject destroy destroy y acá se pone lo que se va a destruir antes me quedó al revés Perdón esto esto era antes sí con el engine destroy había que desuscribirse y ahora es así me quedó al revés mil disculpas antes Entonces era así como podemos ver acá tenemos que hacer un destroy hacer el implements hacer toda la cuestión y ahora simplemente ponemos así y nos des suscribimos sí hacemos la la la referencia lo que queremos destruir con el con el distro ref y listo mucho más fácil Ahora sí Prepárense vamos a ver Signal un poquito más a fondo simplemente podemos agarrar una una constante como x si y le asignamos una Signal sí Recuerden que es para reemplazar los observables entonces van a ser atributos comunes y corrientes pero que vamos a inicializar losos como una Signal fíjense Entonces se asigna el valor de la inicial como c entonces Signal el c entonces este es como un number pero Signal al y le vamos a asignar un 3 Entonces el valor Z en vez de ser igual a 5 + 3 o o x + y va a ser computed fíjate que acá hay una función flecha x y lo tratamos como si fuera un método fíjense que esto lo vamos a tratar como si fuera un método entonces acá le va a ha ser un return del 5 y return del 3 o sea computed va a ser una una función flecha sí o una callback sí como pod ver la señales se llaman con paréntesis porque actúan como una función que devuelve el valor de la señal que es 5 y TR Y fíjense si hacemos un console log acá va a dar 8 porque es 5 + 3 ahora si hacemos xz 10 o sea le cambiamos el valor a x y hacemos un conso log de Z automáticamente cambia el valor porque está escuchando los cambios está observando los cambios Entonces esto es totalmente revolucionario porque el signals nos trae la solución a a a que todo se escuche con todo si cambias x automáticamente cambias Z si cambias y automáticamente cambia Z esto es clave y es importantísimo no tenemos que hacer un montón de código cambiando todas las variables todo el tiempo por las dudas porque claramente si vos cambias una variable No necesariamente cambian todas las cosas que dependen de ello y con signals sí hace como una cascada de cambios y te cambia todo inclusive en la pantalla ya lo vamos a ver en un ejemplo puntual eh práctico pero quiero que entiendan esto Signal cambia completamente eh Como veníamos haciendo antes Incluso en react cuando se incorpora Signal también cambia todo esto es muy importante viene de solid js que es un framework basado en javascript sí Bien también lo vamos tipar claramente si utilizamos acá el genérico con number sí se CA el tipo de dato que va a esperar esto es muy importante porque estamos trabajando en t y angular necesitamos tipar los datos si no para qué trabajas en angular trabajas en t si vamos a trabajar en ángulo y en typescript lo hagamos bien Vamos a tipar los signos utilizando los genéricos que son el mayor y el menor y acá vamos a poner el tipo de datos Sí otra cosa el update Para qué sirve update se usa para modificar el valor de una señal desde el valor anterior o sea utilizando el valor anterior Porque fíjate que si usamos el set cambias el valor uno por otro si tenemos un valor cco hacemos set 10 pasa de 5 a 10 y el c nunca importó ahora update sirve para utilizar el valor anterior o sea el valor anterior c lo conocemos lo pasamos acá como parámetro y le sumamos uno o sea 0 + 1 se utiliza el valor anterior por eso update por eso es Us update porque se utiliza el valor anterior y se actualiza update a actualizar en inglés entonces en este caso por ejemplo el el valor del contador es eh dos a ver en este caso la parte de abajo se supone no que el contador empezó en cero y se le hizo eh dos updates Sí porque acá dice dos Así que claramente se hacen dos updates Sí y se toma el valor nuevo y se llama a ese valor en los paréntesis Fíjate que contador también va con paréntesis porque retorna sí eh el valor sí en este caso empezo en cero y si hace dos updates que acá claramente no está sio diría uno y vamos a ver otra forma más si en el caso del Signal ser un objeto un objeto literal sí eh No hay ningún problema o en este caso una Ray de objetos Sí una Ray con un objeto en este caso no hay ningún problema también podemos utilizar otro método que se llama mutate y mutate funciona como una especie de Patch por qué porque vamos a cambiar solamente una partecita de ese objeto o una partecita de ese array de objetos fíjense que mi se utiliza para modificar solo un valor puntual o varios en el interior de una señal en este caso por ejemplo del usuario cero que es el primero el único que hay acá punto tecnología le vamos a cambiar a angular con signals entonces nombre sergic tecnología angular y ahora también vas a ver angular con Signal solo se modifica el valor de la clave tecnología en la posición cero de la Ray est la posición cero de la Ray y solamente cambiamos tecnología los paréntesis van antes de los corchetes porque la señal devuelve una Ray Entonces el usuario entre paréntesis retorna una Ray y el cero es para poder ingresar acá sí bien Vamos al tema del contador también podemos utilizar e esto es muy parecido a el que sepa r va dec loco te están choreando Todo r Bueno no importa chicos Lo importante es tener las herramientas disponibles para utilizarlas iniciamos un contador en cero Sí y se puede utilizar effect para escuchar cualquier cambio que se haga sobre los Signal que estén adentro y ejecutar acción inmediata Entonces cuál es el Signal que está dentro de este effect contador entonces este contador va a ser la dependencia sí de este efect este efect podría haber muchos signas y muchos defectos Entonces por ejemplo uno va a escuchar contador otro va a escuchar variable a variable B variable c variable presidente variable glotis s no importa Este efect únicamente va a ser efecto va a ser consecuencia de lo que hagamos cuando esté adentro Entonces en este caso si cambiamos el valor de cer0 a s automáticamente se va a ejecutar esto esto sirve un montón un montón un montón Por ejemplo si queremos ejecutar una una sucesión de métodos escuchando los los cambios de los signas está buenísimo Entonces qué hacemos estamos así quietos no estamos quietitos y el Signal es cero que cambia siete pum tuc tuc tuc hacemos los métodos está buenísimo chicos la verdad que esto está bárbaro como contador está dentro del effect lo va a estar escuchando y cada vez que cambie el contador cambiará hará el effect sí bien otra cosa también podemos mandar un callback sí como una función de flecha en el effect para hacer funciones de limpieza Como por ejemplo de suscripciones si quedas suscrito en el e puede ser malo para la para la memoria del navegador y podemos irnos mandando una función de limpieza entonces simplemente mandamos la callback después la definimos acá dentro por ejemplo cim Time out en el caso cas son un set Time out como acá entonces eh básicamente los efectos pueden iniciar eh operaciones de larga duración que deben cancelarse si el efecto se destruye o vuelve a ejecutarse antes de que finalice la primera operación Este ejemplo que vemos un poquito acá lo vamos a ver ahora en la práctica vamos a bajar un proyecto que ustedes también lo van a poder bajar y vamos a ver esto un poquito más en código va a ser un poquito mejor sí vamos a borrar un poquito todo esto que habamos visto vamos a ir a mi github vamos a buscar angular proyecto angular novedades tutorial fíjate que acá también está un poco la explicación de lo que yo hice sí toda la explicación está un poquito más dada acá y acá Fíjate que si vos entrás tenés una aplicación ahora antes qu sé yo sí lo que vamos a hacer es hacernos un clonado de Esta aplicación no sé si se acuerdan vamos acá copiamos en la url vamos a a minimizar esto minimizar esto vamos a cerrar el postman cerrar acá esto que eran los videos y vamos a hacer shift click derecho mantenemos apretado el shift click derecho vamos a abrir el bash o el powerwell lo que quiera vamos a abrir por ejemplo el bash y acá vamos a hacer git clone y vamos a pegar la URL que habíamos copiado sí hay que poner la URL pelada si sin este 200 se ve que copió mal y va así Si va git cl en la URL pelaita hacemos enter y nos va a clonar acá en el escritorio en la carpeta Acá está y ahora vamos a abrirlo acá en el visual Studio code Sí vamos a arrastrar este proyecto acá perfecto y ahí se abrió Qué es lo primero que tenemos que hacer Si queremos que un proyecto ande tenemos que hacer un npm install Sí npm install para que se instalen las dependencias que claramente no están instaladas fíjense que no está el not modules así se van a dar cuenta cuenta vamos a a chequear un poquito mientras esto se instala de qué tiene instalado de qué dependencias tiene este proyecto vamos a ver qué tiene bootstrap bootstrap icons tiene rxjs para to los que son observables y nada más o sea los signals no se instalan no se instala ningún otro tipo de cosa Fíjate que tampoco está acá o sea no se instala nada en angular simplemente tenes que saber que está en angular 16 acá ya tenés todo disponible todas estas novedades que les comenté vamos a ver si se terminó de instalar acá abajo todavía no vamos a esperar un poquito más Ah otra cosa que me olvidé decirles acá también está angular material angular material también está instalado ahí terminó instalar vamos a ir acá y ahí tenemos el No module sí vamos a ejecutarlo npm Start vamos a guardar un ratito y vamos a ver que acá en el local Host nos va a aparecer Ya esta web que armé para poder ver los la diferencia entre angular 16 eh con con las versiones anteriores acá vamos a poner que no acá fíjense que te modifica el ang Jason cuando pones que no vamos a ir abriendo un poquito acá para poder ir chumando el código vamos a ver acá en el modul vamos a ir chumando un poquito mientras se abre acá tenemos incorporado http client Sí el este mat Tab es de angular material el Animation el routing sí no tenemos nada del otro lado fíjate que acá también estoy haciendo el el la incorporación de hydration que esto es nuevo en un Provider lo va acá en los providers y no hay mucho más sí perfecto se ahí levantó vamos a cerrar un poquito vamos a cerrar un poquito y vamos a ir acá bien acá tenemos entonces nuestro nuestra web acá podemos ver que tenemos las diapositivas que habemos visto y tenemos el Home que es este y tenemos antes y ahora Aunque ahora vino angular 17 así que voy a hacer un antes y ahora dos en el otro pero bueno igual este este proyecto ya lo tenía desde antes de este curso por eso que hice antes y ahora ahora claramente está angular 17 Pero bueno no importa vamos a a utilizarlo vamos a ver el tema del manejo de variables y reactividad como les había mostrado Fíjate que antes teníamos simple y observables en el simple si cambiamos el número a de 1 por 5 el 4at sigue estático y claramente 5 + 3 no es 4 de angular a sergi y de clases viernes esto lo vamos a dejar estático fíjate que acá dice ular clase viernes cambiamos a c y acá no cambia no está observando en el observables en cambio sí funciona fíjate que acá antes estaba el rxjs que es la forma en la que se trabajaban an los observables y tenemos que utilizar el observable el behavior subject el suscription sí acá lo pueden leer esto es un poquito de angular avanzado Por lo cual no lo voy a dar mucho en el curso pero sepan que antes funcionaba así Y fíjate que si yo cambio el uno acá el cu va a estar observando y cambia en tiempo real acá angular va a cambiar y fíjense que cambia si si lo vemos en código antes variables acá tenemos los dos hijos sí Y tenemos en el simple Fíjate que está escuchando A B y C sí Y hace cambiar número si los botones hacen cambiar número y cambiar texto si vamos al controlador como habíamos visto tenemos variables normales 1 3 y C es a + b y esto es texto más texto y concatenado si cambiar número cambia de 1 a 5 y de angular serg y como habíamos visto quea estático porque el c no está escuchando y el concatenado tampoco está escuchando y en el caso de los observ Fíjate todo el código que hay que poner para que ande es enorme enorme Fíjate que hay que definir las variables nombre y número como bev subject hay que hacer una instancia este vi subject ponerle uno y angular que esto es muy pare a signals nada más que esto no resuelve todo sino que hay que hacer todo lo que va abajo Fíjate que empeza Nombre nombre modificado está vacío número modificado cero hay que hacer un get nombre get set nombre get número set números un get un setter para para poder setear hay que hacer nombre observable por qué se usa signo de pregunta porque es un observable recuerda que yo comentado que los observables iban con signo de perdón con signo de pesos para saber yy hacer un dis nombre as observable para que el nombre suscripción Eh sea una suscripción eh número observable tiene que ser un observable qu s yo en el eng tenemos que suscribirnos al cambio del nombre y ver que dis nombre sea más code qué s yo el eng distroy que suscribirse fíjate que acá está el eng distroy que yo les comentaba el cambi nombre cambia el nombre recién después de todo este código mira lo que mira que lo que logramos si vos te vas acá Fíjate lo que lograste estas dos con todo este código es un montón de código para dos Imagínate si había toda una pantalla observable y suscrita claramente esto es poco agradable para un programador Y fíjense si ahora vamos al ahora la parte de variables es totalmente distinto mira lo el poquito código nombre igual a un Signal apellido igual a un Signal nombre completo igual a un computed que es un Signal computado simplemente acá a = 1 B = TR y el computado es la la sumatoria de los dos y acá en el e ponemos esto pero en realidad podría no estar simplemente estamos un consol pero imag si si no estuviera esto sería así O sea chiquitito chiquitito chiquitito hacemos set nombre y set número desde el html que fíjate que lo estamos llamando con con signo con paréntesis porque son signals y mira una pada una pavada simplemente este código versus todo el otro esto es de otra cosa que acá sol estaba mostrando los signals si nosotros vamos a la hora manejo de variables tenemos acá todo lo de signals Por eso hay más código si que es lo que yo le había comentado pero si no si no estuviese eso sería solamente la parte de arriba este texto imagate lo que es Signal podremos Borrar esto y todo esto y solamente quedarían estas líneas es s s sencillo fíjate que acá se llama con paréntesis el computer También acá también sí fíjense la diferencia es enorme vamos a ver otras cosas manejo de tax fíjense que antes era con estos dos Sí vamos a ver acá antes tax fíjense que antes se llamaba app hijo y acá también Sí y ahora si vamos a a la hora tax fíjense que está con una sola Sí la misma hora Ahora tax y uno solo además también queremos ver un poquito la comunicación entre componentes Sí vamos a abrir ahora el antes sí antes habría que hacer el input binding el view Child servicio compartido para poder hacer lo que habemos visto mandar información de uno a otro Sí vamos a verlo acá en el en el antes AC vamos a ver input sí Y acá en inputs vamos a ver que el html por ejemplo tenemos varias cositas s buen me marca esto así porque estoy utilizando un extensión que me marca esto en rojo Pero bueno vamos por ahora ponerlo si les parece así para que no los confunda Ahí está para ver para concentrarnos en esto si después yo lo descom pero por ahí el formato era molesto fíjense que acá app Child para poder comunicarse en un input mandaba esto pero si esto llegaba a ser undefined no llegaba a estar y va a dar un error se acuerdan que hemos visto bien Entonces primero principal es tag de apertura tag de cierre Esto es lo que le estamos pasando del hijo al del padre al hijo vamos a ver el Child ahora y fíjense que el input Sí vamos a cerrar esto fíjense que el input eh recibe Data source periodic Element Sí y básicamente lo despliega acá si nos vamos al hijo Este es el hijo y simplemente lo despliega acá bueno Esto no no hay nada del otro mundo ya lo habemos visto un montón de veces pero vamos a ver cómo es ahora vamos a ver los inputs Ahora sí fíjense hay un montón de diferencias primero principal esto vamos a hacer lo mismo vamos a comentar acá para que no no no nos moleste fíjense acá que en el caso del input acá es app required y app transform vamos a ver de qué trata todo esto bien primero tenemos dos tabs require y transform primero acá require o sea si nosotros vamos acá vamos acá require si vamos acá require Fíjate que si yo esto no lo paso Vamos a mostrar acá Perdón vamos a mostrar acá vamos a ver la diferencia entre ahora y antes Fíjate que si yo esto no lo paso y guardo ya me reclama de que Data source es obligatorio Por qué Porque en elijo dice input require true si require true ahora qué pasaba antes fíjate ahora le voy a guardar y va a volver a andar bien fíjate antes vamos a ir antes si yo al input Child sí no le mandaba esto fíjense guardo y compilabile comunicación entre componentes Y fíjate que acá no funciona no O no no se llena porque está vacío y esto nos puede traer un montón de problemas acá no hubo ningún error sí no no no es que hubo un error porque no teníamos justo ninguna cosa que falle pero fíjense que ya no se llena porque no le estamos mandando pero no nos avisa que es obligatorio en cambio claramente en este si nosotros no lo mandamos ya falla la compilación entonces nunca el cliente vería que está vacío No falla en la compilación y Simplemente nos podemos dar cuenta pero aparte también hay otro más que es el condicional fíjense que si nosotros ponemos acá que sea transform boolean attribute que lo vamos a ver acá en el transform sí acá fíjate que yo acá dice esa empresa false si lo estoy pasando como un String ven que lo estoy pasando como un String Bueno si yo lo pasara así como un String y no le pusiera el transform Fíjate que así antes antes fallaba de la siguiente forma voy Mostrar dos formas primero principal voy a borrar esto en este caso funciona pero te marca que no es buano Sí ahora si nosotros le borramos acá esto y esto porque esto es lo que está haciendo que funcione Fíjate que ahí ya va a dar de que String no es asignable a tipo buano yo estoy pasando un String a tipo buano si yo est como est poniendo los corchetes angular igual lo transforma bien claramente con lo que es el condicional transformando acá funciona de forma correcta sí que eso es lo importante y Bueno ahí ya estamos viendo el tema de los inputs vamos a inyección de dependencias otra cosa muy interesante la diferencia de antes y después si bien Esto creo que ya estaba disponible en angular 15 las últimas versiónes angular 15 no importa vamos a verlo ahora también para que ustedes lo sepan vamos a ver antes en dependencias fíjense que antes la inyección se hacía con el constructor sí como lo estuvimos haciendo durante el curso y ahora las dependencias se hacen con el inject y funciona Exactamente igual sí ponemos dis pun servicio get datos etcétera sí funciona Exactamente igual esto ustedes se lo pueden bajar como igual que hice yo y pueden chequearlo un poquito más a fondo o sea pueden verlo un poquito más de tiempo ahora est ha un repaso rápido y acá módulos y componentes otra cosa que cambió muchísimo vamos a ver antes módulos fíjate AC este componente se llama módulos component pero es un es un componente y lo que yo les quiero mostrar es lo siguiente antes sí el ángulo los módulos proporcionan componentes etcétera etcétera etc y acá lo que te explica es que básicamente funcionado como un árbol como yo les he comentado Ah les quiero mostrar una cosa que ustedes no habían visto hasta ahora que es módulos dentro de módulos Ah me había olvidado de mostrarles esto en este este este proyecto tiene aparte del módulo principal tiene dos módulos más fíjense s eso no me había me había no me había percatado de de comunicárselo en el módulo estoy incorporando fíjense eh acá no dice nada Sí porque este es el módulo principal pero yo tengo un módulo que se llama antes módulo sí antes módulo y ahora módulo sí fíjense son dos módulos adentro del módulo general y cómo se exporta se exporta como ahora modul sí Y dónde se incorpora en el app routing directamente y fíjense cómo se llama se pone load children y se llama de esta forma sí de esta forma está haciendo un Lazy loading en los módulos internos de esa forma tenemos el módulo principal y muchos módulos internos que llamándolo de la moding no se activarán hasta tanto sea necesario cuando hagamos el enrutamiento hacia allí Sí también lo pueden chequear bajándose este este proyecto para chequearlo un poquito más a fondo esto no lo vimos Tampoco porque es un poquito más avanzado claramente Este es un un curso para eh personas que empiezan desde cero Bien entonces estamos en el tema de los módulos y ahora fíjense eh son componentes independientes vamos ahora módulos y fíjense que ahora Stand Alone true O sea que este es un componente micr módulo O sea que es independiente e importamos exactamente lo que necesitamos incorporamos la tarjeta de de angular material el botón de angular material el to la materia el ngif Y l4 entonces si nosotros vamos acá fíjate que estamos utilizando eh la tarjeta á materia estamos utilizando un montón de cosas botones que s yo un montón de cosas y fíjense que también hay un ngif si un ng4 que también lo estamos incorporando de forma independiente a través de esta forma Sí si vamos acá tenemos este toggle y acá tenemos este hermoso perrito que es el de la ansiedad que lamentablemente para cuando terminamos este curso ya no está con nosotros pero bueno siempre estará con nosotros chems y acá tenemos por ejemplo esto que creo que no hace nada pero no importa estos botones son propios de angular materia las tarjetas también y simplemente podemos ver que todo esto funciona como de forma independiente Sí y última cosa es el pizarrón de pruebas que nos va a servir para lo siguiente que es acá el pizarrón podemos ver que tenemos una raay de objeto Signal Sí para también ver un poquito más y ver cómo utilizar el update y el mutate en el caso de realizar acción array que es este va a ser un update que qué es lo que hace realizar acción dos agarra el array Sí y le agrega uno más tocamos acá tiki agrega un dos 3 cu sí fíjense que lo que hace el update es utilizar el el el arrey original y agregarle el cuatro Y en el este otro caso es un mutate solamente para cambiar una cosa fíjense que acá dice nombre tecnología angular como ustedes y per tecnología bueno pedra Viene otra épa si tocamos fíjense que ahora sergic también sabe angular con signals igual que ustedes entonces qu hicimos acá solamente de usuario cero que soy yo le cambiamos angular con signals que venía desde angular o sea de este le cambiamos solamente un atributo por eso usamos mate y bueno esto ha sido todo en esta clase de angular 16 vamos a una clase magnífica creo que para esta altura no debe haber ningún curso que haya de angular 16 Así que esperemos ser el primer curso que esté actualizado de todos viendo áula 17 nos vemos en la siguiente sección señoras y señores vamos a dar algo que muy muy pocos lugares van a encontrar en Internet angol 17 todas las novedades en español y para ustedes dentro de un curso desde angular desde cero o sea increíble acá tengo un nuevo fondo de pantalla como pueden ver sí que tiene el logo nuevo de angular y Me he preparado estas diapositivas con el logo nuevo de angular 17 así que vamos a por ello perfecto Qué les parece eh impresionante cono nuevo nuevos colores todo me encanta vamos uno por uno primero principal la documentación nueva web moderna de documentación donde hay un playground playground es para poder probar las cosas y buscador es mucho más fácil de usar vamos a ir viéndola vamos a abrir un poquito angular dev y vamos a ver esta increíble nueva página de angular como podemos ver si bajamos es está buenísimo lo que es el scroll hace animaciones si muy muy bueno Yo estoy haciendo scroll si fíjense que baja La Barrita bar y el último te muestra algunas novedades realmente excelente excelente Fíjate si hago hacia atrás va hacia atrás no muy muy bueno acá tenés un video con algunas cosas claramente en inglés y bueno tenés un buscador por ejemplo si vamos a buscar no sé structure o alguna palabra por ejemplo structural directive fíjense que está todo en la documentación sea la documentación realmente tiene un buscador increíble aparte mira lo bien que se ve cuando vas cambiando nada la verdad está muy muy bien hecha da placer ver esta nueva web de documentación y por supuesto está todo Nada más que por supuesto en inglés Está en fase Beta como pueden ver bet doc Pero bueno claramente es muy muy superior a la anterior vamos ver que hay tutoriales por ejemplo eh aprende angular en en tu buscador o eh arma la primera aplicación angular de forma local con npm Sí así tiene tutoriales también tiene un playground que esto está muy bueno que esto lo habemos visto a hacer esor hasta abajo en donde podés verificar eh todo el código nuevo sí hecho con cosas nuevas como los signals etcétera y es un juego ya se va a cargar como un personaje que que hace como un ángulo la verdad que tiene unas animación está muy bueno a ver si lo podemos chequear un poquito y ver ahí está perfecto fíjate que tenemos que tratar de pegarle a esto 300 uno más o menos sería algo así como por acá no vamos a ver tiki y dice que fui 94 acertado sí le dio un ángulo de 301 y buscaba 300 11 si pongo Ken 288 Supongo que debe ser algo a ver 180 200 270 y un poquito más no a ver ahí muy bueno bueno la cuestión es que está muy bueno es un jueguito hecho en angular lo pueden chequear acá un poquito en el código es un código bastante complejo igual ya que tiene animaciones y todo pero la verdad que está buenísimo para ver eh bueno Esto después También tienen otras cosas más signals control Flow fíjate que acá en el control Flow hay algunas cositas nuevas Ya lo vamos a ver y reference tenemos todo ordenado eh podemos ir uno por uno digamos Happy reference feature animations bueno está por orden de por orden alfabético y podemos ver una por una todas las las referencias Sí la verdad que está muy muy buena Les recomiendo entrar y chusmear aparte de la documentación que es nueva también la nueva sintaxis de estructura de control esto es una de las grandes revoluciones que trae una de las cosas más importantes para mejorar la experiencia de desarrolladores han lanzado una nueva sintaxis de plantilla de bloque que ofrece potentes funciones con interfaces sencillas y declarativas vamos a ver que en lo que habemos hecho ng4 ngif y ng switch está solucionado de otra forma mucho mucho más sencilla fijémonos acá dice se utiliza la nueva sintaxis de bloque para un flujo de control optimizado e integrado después de ejecutar estudios de usuari se identificó que muchos desarrolladores luchan con el ngf ng switch ng4 el flujo de control integrado permite una sintaxis más ergonómica y cercana a javascript por lo que es más intuitiva requiere menos búsqueda de documentación mejor comprobación de tipos gracias al estrechamiento de tipos más óptimos es un concepto que existe principalmente en tiempo de compilación lo que reduce la huella en tiempo de ejecución haciéndola desaparecer O sea no no hay un tag puntualmente porque la estructura es por fuera ya la vamos a ver es como si fuera un ng container algo así que la estructura no queda en el html está muy bueno lo que podría reducir el tamaño del paquete en 30 kb y mejorar aún más la puntuación cor web vital que bueno es el tema de la velocidad de de de que que una una página se muestra etcétera está disponible automáticamente en sus plantillas sin importaciones adicion ales Por lo cual ya no hay que hacer es importación si hacemos un standalone components y mejora significativamente el rendimiento sí bien vamos a ir uno por uno primero el ngif Recuerden que antes el ngif como podemos ver acá se ponía en una directiva dentro de un dip por eso antes si es algo que est en un ng container si se veía en el html se ponía el enif y decíamos usuario logueado els esto no lo vimos pero básicamente es un If Else Else usuario anónimo Sí el usuario anónimo estamos poniendo un engine template y se llama si esto no se cumple sí este es como un If Else dentro de eh la directiva sí Entonces si el si el usuario logado existe dice el usuario logueado es dos puntos y ponemos el usuario logueado por ejemplo Pedro Juan lo que sea y si no el usuario no está logueado por ejemplo antes se hacía así y ahora fíjense lo sencillo Qué es If usuario logueado listo el usuario logueado es eh Juan Pedro els lo otro sí mucho mucho más sencillo y claramente nos estamos ahorrando un di supuesto acá puede ir un p acá también podemos darle podemos darle realmente una etiqueta que que funcione mejor en este caso está Ultra minimalizm Acá no está dentro de ninguna etiqueta y acá tampoco Sí vamos a ver ng switch el cual acá tenemos claramente un un String sí que que en una variable y dependiendo Cuál de todos estos tresera eh actuaba distintas formas Pero en el caso que dije eh En este caso va a ser nivel de acceso si es admin te va a mostrar este componente si es moderador te va a mostrar este componente y si no te va a mostrar el componente de usuario O sea si tenés eh nivel de acceso admin un componente moderador otro componente y usuario otro componente sí un ng switch Y ahora fíjate la diferencia es mucho mucho más sencillo acá no tenés este div primero principal y los tres componentes que se darían renderizar van dentro de llaves esto es un poquito más parecido a react para los que no los que conozcan y básicamente tenés switch Case y mandas adentro de los paréntesis eh cada uno de los valores que debe tomar y si no default la verdad que muy muy bueno después tenemos el ng4 Fíjate que antes teníamos un ng container para que no aparezca el html si no nos genere un tag y acá tenemos led usuario of usuarios o sea de este array tomaba uno iba haciendo un bucle y Mostrar el usuario nombre Entonces si tenemos un una Ray de usuarios Juan Pedro Ricardo sería usuario ent sería Juan Ricardo y Pedro no O no me acuerdo cómo se llamaba y en el caso de que sea ninguno muestra no hay ningún usuario para mostrar entonces este es como una especie de Else en el caso de que no de que no haya usuario porque claramente si no hay ningún usuario no se va a mostrar absolutamente nada y acá fíjate la la nueva es for usuario of usuario se trackea por ID Sí para que tenga una especie de key Unique key Sí y se muestra de la misma forma y si no emp dice no hay usuarios para mostrar en vez de hacer todo este un ngif sí que tendremos que usar una estructura ng4 y un ngif fíjate que acá directamente empty es una una especie de estructura distinta y ahorramos muchísimo muchísimo código fíjate la cantidad de código que acá la fíjate la cantidad que hay acá es muchísimo menos por otro lado vistas aplaza esto trata lo que se llama Lazy loading sé que no lo hemos visto muy en profundidad pero el la loading es cuando no carga al inicio toda la pantalla sino que carga lo más importante y luego va cargando el resto a medida que el usuario o la persona lo necesite Ese es el la loading es dice aprovechando la nueva sintaxis de bloques que es la que vimos recién el nuevo angular trae un nuevo y potente mecanismo que puede utilizar para que tus aplicaciones sean más rápidas entonces aprovecha este nuevo sistema de bloques carga lo necesario y el resto lo carga de forma Lazy vamos a verlo podemos ver que la aplicación tiene un nav y tiene list item details y service si Entonces primero se carga lo más importante que son estas dos cosas esto de acá fuera es lo primero que se carga si y después se va cargando a poco a medida que haya necesidad de mostrar se carga primero la lista y los ems se van cargando de forma Lazy s y los dles por supuesto después y el último del servicio entonces se va trabajando de forma Lazy para que no utilice tanto Ram del navegador y ande mucho más rápido y no necesite tantos recursos de la máquina vamos a ver un poquito más en un d esto supongamos que tienes un blog y te gustaría cargar de forma Lazy la lista de comentarios de los usuarios O sea no todos sino de forma Lazy de a poco los que estás viendo por ejemplo actualmente tendrías que usar el view container ref por ejemplo para setear el último comentario cuando llegues y así se dispare Sí si bien no lo hemos visto funciona así uno va haciendo scroll y cuando llega el comentario que hace referencia recién ahí se activa la llamada y todo si de esta forma funciona el la ahora y a la vez gestionar toda la complejidad las limpiezas Porque también se va haciendo como se va cargando cada vez más en memoria y gestionar errores de carga Mostrar un marcador de posición etcétera ocuparse de varios casos de esquina o sea varios casos de este tipo Eh puede resultar un código complejo Que será difícil de probar y depurar o sea si tuviéramos que hacer en muchos muchos pasos esta este código que se carga de forma Lazy sería cada vez más complejo y el código sería bastante complejo y y difícil de mantener las nuevas vistas aplaza te permiten cargar de forma Lazy la lista de comentarios y toda las dependencias transitivas con una sola línea de código @ difer y se acabó increíble también un salto enorme en las cargas la Si fíjate que ponés un acá ponés la lista de comentarios @fer y con eso se carga de forma Lazy está buenísimo pero no solamente esto también tiene otr característica más la parte más increíble es que todo esto sucede a través de la transformación en tiempo de compilación fíjense esto angular abstrae toda la complejidad encontrando componentes directivas tuberías utilizadas dentro un bloque edifer generando las importaciones dinámicas y gestionando el proceso de carga y cambio entre estado O sea todo lo que pongas adentro de @ difer angular lo va a sa ver utilizar de forma inteligente para que no te cargue el navegador empezar a cargar la un componente cuando un determinado elemento del dom entra en la ventana gráfica implica mucha más lógica compleja y lapid intersection observer angular hace que el uso del intersection observer sea tan sencillo como Añadir un disparador de vista aplazable esto qué quiere decir lo que le comentaba recién Imagínate que vos estás bajando bajando bajando llega el objeto que tenemos que hacer referencia Entonces lo está observando llama al nuevo servicio trae los nuevos datos y lo pone Fíjate que son un montón de pasos y ahora simplemente con poner defer on viewport O sea que lo vemos el el el el lo que se refiere lo vemos carga más fíjate que acá dice comon list sí eh Cuando cuando tengamos en en el viewport que necesitamos más carga va a seguir cargando la lista y si el placeholder dice un contenido del placeholder para mostrar hasta que se carguen los comentarios por ejemplo un loading acá dice comentarios placeholder que vendría ser un placeholder puede ser Estamos cargando el resto de los comentarios o poner por ejemplo un skeleton o lo que sea hasta que cargue el resto se el placeholder va a ser lo que se va a mostrar mientras carga más cosas Normalmente se usa un loading ya vamos a ver que hay un ejemplo de eso también hay más bloques para los estados de carga y error Por ejemplo loading sí está el ar loading para poner cargando ara error Por si falla la carga y el placeholder que es eh Por ejemplo si vamos utilizar un esqueleton alguna cosa Sí muy muy bueno pero no solamente está el tema del view del viewport para para cuando vayamos bajando y ve el viewport sino que hay otros más por ejemplo on edle carga de forma Lazy el bloque cuando el navegador no es está haciendo ningún otro trabajo o sea si el navegador está tranquilo sigue cargando sí on inmate eh on inmedia que inicia la carga de forma lace Y de forma automática sin bloquear el navegador ontimer retrasa la carga con un temporizador Por ejemplo puedes poner la cantidad de milisegundos un segundo 2 segundos 3 segundos on viw on viw ref acá esto lo que habíamos visto recién pero acá podemos poner el ref O sea la referencia puntual por ejemplo a lo mejor vos querés bajar Bajar bajar y que puntualmente algo dispare la carga entonces podes pasarlo como referencia acá fíjate que acá dice esto de anclaje es la referencia que decimos on interaction puede ser que la la carga empiece de forma l cuando el usuario haga una interacción puntual eh acá puedes poner la referencia la interacción por ejemplo un botón on hover también puede ser que se cargue de forma leasy si vos te pones encima de algún elemento y el W esto permite especificar una condición propia mediante una expresión que devuelve una promesa o sea When vendría ser en cuándo pase tal cosa o cuando una promesa se cumpla etcétera fíjate que acá tenemos on on viw y además prefetch on edle o sea usa esto de que si no estás haciendo nada Siga cargando Sí muy bueno Esto también renderizado renderizado híbrido nosotros ya habíamos visto que una de las novedades de angular 16 era Esto del server size rendering fíjese ssr es digamos renderizado del lado de servid y ahora digamos nos permite un renderizado híbrido utilizando eh ssr o sea renderizado de lado servidor y además hay sitios directamente estáticos que se llaman ssg que es eh básicamente prerendering a los desarrolladores a través del cli de angular o sea antes nosotros tenemos que hacerlo a mano utilizando el server rendering pero ahora directamente en el click de angular vamos a poder hacer un servidor eh una aplicación con servidor eh híbrido directamente podemos engine New my app yong guion ssr que es server Side rendering y nuestra aplicación ya va a empezar siendo server Side rendering por default buenísimo nuevos hooks para el ciclo de vida Recuerden que habíamos visto todos los ciclos de vida que había enion init on destroy etcétera bueno vienen dos nuevos que tienen un montón de características impresionantes para mejorar el rendimiento del server Side rendering y el ssg que es digamos las páginas estáticas de angular La idea es alejarse de la emulación del dom y de las manipulaciones directas del dom el dom recuerden es el document object model que es el html Por así decirlo al mismo tiempo a lo largo del ciclo de vida de la mayoría de las aplicaciones es necesario interactuar con elementos para instanciar bibliotecas de tercero medir el tamaño de los elementos etcétera vamos a ver entonces que tenemos dos nuevos after render registra una llamada de retorno que se involucrará cada vez que la aplicación termine de renderizar recuerdo que Recuerden que esto está aplicado a server Side rendering Sí o sea cuando termina de renderizar hace una llamada Es como si fuera una especie de ng After viw o ng after viw check it pero de eh aplicaciones de server Side rendering Sí y after new after next render registra una llamada de retorno que será invocada la próxima vez que la aplicación termine de renderizar o sea cuando hacemos algún cambio o algo y cambia recién hay sí vamos a verlo acá solo el navegador invocad invocará estos hooks acá me voy a correr un poquito lo que permite conectar lógica de Don personalizada de forma segura directamente dentro de los componentes Por ejemplo si quieres instanciar una librería de gráficos puedes usar after next render vamos a verlo por ejemplo tengo una librería de gráfico que va a ser por ejemplo eh gráfico de tortal Chart s el famoso Chart eh Entonces vamos a poner app gráfico así se va a llamar el selector y el template es muy sencillo se pamos DIF gráfico que se va a mostrar solo en el caso que queramos llamar un gráfico por ejemplo una gráfico de torta hacemos un Vial gráfico o sea vamos a estar viendo este div eh lo tenemos acá como una una referencia a un elemento html sí que es el view Child para ver esto y hacemos gráfico puede ser o My Chart o nul sí o sea puede ser un tipo my Chart que es puntualmente una importación de de gráficos y fíjense que acá en el constructor ponemos after next render Sí y acá llamamos a dis gráfico igual New my Chart o sea hacemos un instanci amiento de el objeto my Chart y acá le pasamos la referencia al al objeto div sí Y ahí ponemos Face after render Face right O sea que después del renderizado lo escribe o sea después que termine el renderizado estático muestre eh el la la muestre el gráfico Sí entonces cada Hook admite un valor de fase por ejemplo lectura o escritura que angular utilizará para programar las retroll amadas con el fin de reducir el trash de diseño y mejorar el rendimiento o sea vas a mostrar el server Sign the rendering o sea toda la la fuerza del renderizado lo hace el el el el server te lo manda renderizado y Únicamente se modifica la parte del gráfico sí Esto va a hacer que ande muy muy muy rápido Sí bit y y es bile por defecto esto algunas personas que hayan visto mi curso de react nosotros para poder hacer nuestras aplicaciones eh react usábamos bit que básicamente es un preconstructed el engine New y se arma la aplicación de angular con todas las carpetas bueno bit También sirve para esto y trae el s build que hace que se construya y además después se budee de forma muy muy muy veloz esto react ya lo viene utilizando y es la verdad una maravilla porque cada vez que cada vez que hace una nueva aplicación la hace inmediatamente y cada vez que ponés en np Start empieza así Cada vez que haces un cambio tuc lo cambias rapidísimo Así que dicen acá por lo que han hecho los estudios de último tiempo en las pruebas que la compilación es build Plus potenciada por bit da una mejora del 67 por en el tiempo de compilación o sea rapidísima va a ser las compilaciones de angular 17 por otro lado también trae las mejores de los dep Tools al final no llegamos a ver las dep Tools en este en este curso pero deos de las dep clásicas que nos dejaban ver todos los componentes han traído mejoras para poder ver todo lo que son inyecciones la verdad está buenísimo vamos a verlo un poquito ahora se ha implementado nuevas interfaces de depuración que nos permiten conectarnos al tiempo de ejecución del framework e inspeccionar el árboles inyectores recuerdan que habemos dicho que hay como un árbol Acá está puesta la angular dept y fíjate que acá pues ver el el árbol de inyecciones s esto se puede ver hoy en día si este árbol existe donde vas cargando los componentes y todo el árbol hacia abajo de los componentes hijos hijos nietos qu s yo y también acá puedes ver por ejemplo que usa mat dialog modu o sea lo que vendría a ser uno de los módulos de angular material s y te permite hacer todo un una depuración un debugging de angular utilizando esta herramienta de dep Tools está muy buena bien standal apis desde el comienzo Recuerden que los componentes Stand Alone básicamente son componentes que son independientes que son como micr módulos y no dependen puntualmente de otro módulo puntual bien acá viene algo que nos pone en hack un poco el mismo curso que acabo de dar porque yo el curso que le habías comentado hasta ahora sí es módulos módulos módulos módulos y dentro de los módulos están los componentes Bueno una de las principales cosas que dice angular 17 es que se va a mantener esto pero se va a tender a eliminar la modularización de la forma que conocemos para solamente trabajar con componentes o sea los módulos en este momento siguen existiendo pero se va a tender a eliminarlos por qué Porque los componentes Stand Alone han sido todo un éxito y realmente mejoran muchísimo la experiencia del desarrollador y el rendimiento de la aplicación si bien el en modul se mantiene la tendencia se mantiene la tendencia es a su desaparición y que comiencen todos los componentes a hacer Stand Alone y funciona independientemente vamos a verlo un poquito en código puedes iniciar el 100% de tu proyecto en con componentes Stand Alone haciendo eng generate @angular bar Core dos puntos Stand Alone de esa forma todo todo tu proyecto va a iniciar como Stand Alone de esa forma todos tus componentes van a ser totalmente independientes no van a depender de ningún módulo Sí y bien eso ha sido todo la verdad que está buenísimo todo lo que trajo trajo angular 17 y después ya vamos a ir de lleno a los proyectos finales y se acaba este curso estamos entrando en la en la parte final Estoy muy emocionado la verdad que lo de angular 17 es una bomba estoy muy contento de poder compartir con ustedes y nos vemos en la siguiente sección señoras y señores se va acercando el final del curso Así que vamos con los proyectos finales vamos a hacer uno sencillo y otro un poquito más complejo utilizando angular 17 increíble para eso tenemos que instalar la última versión de ang c Así que vamos a hacer lo siguiente mantener apretado shift clic derecho vamos a abrir el bash o el powershell cualquiera de los dos y vamos a poner entonces npm install yong @angular barc Y de esa forma va a actualizar a la última versión y cuál es la última versión angular 17 qué es lo que necesitamos vamos a esperar hasta que termine de instalar y vamos a poder hacer nuestro proyecto en la última versión de angular este curso va a estar super actualizado Y vos vas a estar super actualizado para poder conseguir tu primer primer trabajo como desarrollador web se terminó de instalar vamos entonces a hacer lo nuestro lo primero principal que queremos hacer es hacer una aplicación de Cero y para ello lo que vamos a hacer es lo siguiente volvemos a hacer entonces clic derecho powershell aquí o el bash cualquiera de ustedes lo que quieran en este caso voy usar el powerset para usar uno y uno y acá vamos a poner engine New y vamos a poner lista de tareas app vamos a hacer una aplicación de lista de tareas ya hemos hecho varias eh Durante los cursos anteriores pero qui mostrárselas no solamente en angular sino utilizando el local storage Así que vamos a ir con eso vamos a poner por ejemplo lista tareas app sí hacemos enter y nos va a estar creando en angular 17 esta aplicación y vamos a ver algunas de las diferencias y poner en práctica cosas muy muy piolas para que esto te quede para mostrarlo en el portfolio Sí vamos a poner que queremos SS acá me ofrece Por ejemplo si queremos hacer server Sign rendering vamos a poner que sí para ver cómo se configura y listo perfecto vamos a abrir Entonces lista de tareas en nuestro ISO de Studio code vamos a arrastrarlo acá perfecto ya lo tenemos acá y bueno la idea un poco Entonces es ver un poquito las diferencias vamos a abrir acá el app y fíjense que la primera diferencia es que no tiene más el app modu o sea Ya de por sí originalmente eh angular 16 traía el app modu Digamos como un módulo superior en el cual derivaba todo y ahora no lo trae más directamente trae las rutas la configuración y eh fíjense el server para poder hacer server Side rendering es totalmente distinta la base y vamos a utilizar nuestro componente como podemos ver acá como Stand Alone Sí o sea va a ser un micr módulo que directamente nos va a dar a la aplicación Super emocionante no vamos a por ello primero principal lo que quiero hacer es eh Como voy a hacer una lista de tareas quiero hacer un servicio para poder eh guardar las tareas en el local storage para ello vamos a abrir acá la terminal con control leñe y vamos a poner ng G de generate s de service y vamos a poner Services vamos a hacer la carpeta Services para portarnos bien y vamos a poner tareas entonces ahí va a poner tareas pun servic sí de esa forma vamos a tener un service para poder hacer los get de traerlo de local storage vamos a poder agregar una tarea nueva local stores y vamos a poder eliminar una tarea del local stores sí acá vamos a poner que no para que no comparta la información y ya está creado vos acá Services fijemos que ya tenemos tareas service y este vamos a borrar lo que es el tema de del testing que no vamos a hacer ahora y esta tarea básicamente está vacía Así que vamos a ir cerrando Ah una cosita que le quería Mostrar es si nosotros hacemos npm Start varias cosas primero principal van a ver lo rápido que funciona y lo rápido que compila y segundo les quiero mostrar que cuando arranca angular es muy distinto a lo que habíamos visto antes y bueno también está bueno para para que ustedes puedan chusmear un poquito perfecto hacemos control click en local Host 4200 y fíjense lo distinta que era la que habíamos visto Mira ya tiene el logo nuevo de angular te manda a la documentación tenés tutoriales No la verdad que está buenísimo buenísimo buenísimo así que bueno vamos a poner manos a la obra ya quedó acá abierto vamos a chequear un poquito esto y vamos a sentarnos un poquito en el service sí lo primero que queremos hacer es ponerle un nombre a a lo que va a ser la Key que le vamos a poner local storage sí sea después les voy a mostrar có y todo pero principalmente acá siamos a inspeccionar y vamos a application sí tenemos acá el local storage ven el el local storage 4200 está vacío Sí y ahora vamos a tratar de hacer que ahí se guarden las listas de tareas Entonces vamos a empezar por la lógica y después vamos a ir un poquito más al componente primero principal entonces lo que queremos es poner un private local storage key Vamos a ponerle por ejemplo lista tareas sí liste tareas nada más vamos a hacer un un get para para traerlas vamos a hacer get tareas y acá me está ayudando fíjense que que me ofrece darme las tareas de forma directa vamos a poner así y vamos a poner acá as String Sí para que no se queje porque si no si nos ponemos encima decía que podía ser nul Y de esa forma eh En el caso de que de que haya algo en el local storage lo va a pasar a Jason o y lo va a devolver Digamos como un array y sio un array vacío Sí vamos a poner agregar tareas agregar tarea agregar tarea vamos a recibir una tarea sí ya vamos a ponerle igual eh acá me está ofreciendo Fíjate que dice String perfecto Esto está bien abrimos y cerramos vamos a hacer con tareas para poder traernos todas las tareas eso está perfecto hacemos dis get tarea o sea nos traemos todas las tareas que están eh en el local storage agregamos la tarea nueva haciendo tareas pun Push o sea de este que habemos traído todo hacemos un Push de la nueva tarea y sete este tareas nuevo en en el local storage porque el local storage funciona como si fuera una cadena de Stream larga s entonces lo que queremos hacer es agregar lo que está de lo que estaba una nueva tarea y volver a setear cada vez que samos se borra lo anterior y se pone algo nuevo Y por último vamos a tarea vamos a recibir el Index como podemos ver acá y vamos a hacer lo mismo primero con tareas como dice acá vamos a a traernos las tareas dis pun get tareas ya vamos a tenerlas acá sí a las tareas y justamente como dice acá vamos a hacer un splice o sea vamos a sacar la que indica el índice Sí vamos a pasar el índice la vamos a sacar y vamos a solamente sacar una sí y qué vamos a hacer de los que queden como vamos a hacer un splice de las tareas que queden la volvemos a setear entonces sacamos esa Y de esa tarea que que quedan sete en el en el local stor Sí ya tenemos nuestro servicio listo ahora lo que hay que hacer es hacer todo en el en nuestro componente vamos a hacer directamente en el componente raíz Porque no tenemos ningún tipo de de estructura dentro porque va ser una aplicación muy sencilla Así que simplemente vamos a ir borrando esto y en el html vamos a borrar todo guardamos vamos a borrar este archivo que es el de testing y en el ccs también lo vamos a dejar vacío Entonces vamos a arrancar con el html vacío sí lo primero principal que tenemos que ver es que en el imports está importando common modu y router outlet O sea que lo que era la el enrutamiento y todo que se hacía en el módulo ahora lo podemos hacer acá y por qué Porque está tipo Stand Alone O sea si es Stand Alone el componente se se comporta como un microm módulo entonces hay que importar todo acá nosotros como vamos a necesitar el formulario vamos a poner entonces form modu Sí y lo vamos a trer de forms para poder utilizar se que vamos a utilizar un input y un botón para poder agregar la tarea y también otro botón que es para eliminar y por ahora eso va a ser todo De hecho el router outlet no lo vamos a utilizar Así que lo vamos a borrar ti listo perfecto bien vamos a ir con lo nuestro primero vamos a poner lista de tareas vamos a a igualarla por ahora a una red vacío ya vamos a tipar no se preocupen vamos a poner nueva tarea vacío de hecho va a ser una Ray String no nos vamos a gastar mucho vamos a hacer una Ray de strings sí lo mismo vamos a hacer en el service Me parece que Estaría bueno hacer que devuelva una ar raay de strings perfecto acá en agregar tarea no devuelve nada y en eliminar tarea tampoco ent Esto va a ser un String guardamos y vamos a hacer la primera inyección pero principal como dice acá el constructor sí me me está ofreciendo algo pero yo quiero hacer la inyección como C ahora con angular 17 Entonces cómo se hace ponemos private y bajo tareas service igual inject tareas service Sí este tareas service se llamaba así sí tareas service lo vamos a traer del servicio y fíjense que el inject tamb lo tengo que traer de angular Core vamos a ponerlo acá y ahí está entonces ahora tenemos inyectado si en vez de hacerlo la inyección del de dependencia a través del constructor lo estamos haciendo como se hace aola ahora en angular 16 y 17 sí perfecto ya tenemos nuestro servicio acá para poder usar todas estas cosas que habíamos definido acá Así que vamos a ir por lo nuestro primo principal Necesito hacer un un un oninit para que al comienzo de la aplicación me traiga las Tas Entonces vamos a poner implements on init sí hay que también traerlo de acá de angul Core perfecto y ahora hay que agregar el oninit ponemos acá implement oninit vamos a poner un poquito más abajo y qué vamos a hacer vamos a hacer lo siguiente vamos a tenernos todas las tareas des dis pun lista tareas Perdón lista tareas igual dis punto t service get tareas este get tareas nos va a estar las tareas y la va a setear acá ya la vamos a tener disponibles en nuestro componente sí por ahora vamos a hacer esto acá ya me está ofreciendo lo que sigue claramente copilot ayuda muchísimo como pueden ver hay inteligencias artificiales que están muy muy buenas para poder seguir trabajando hay algunas gratuitas que ya les voy a a decir al final del curso para que se lleven Y prueben sí hay dos o tres que son gratuitas que las van a poder utilizar así como yo utilizo copilot para que les dé una mano con todo esto sí acá principalmente lo que necesito hacer es un div Sí vamos a poner un h2 vamos a poner lista de tareas vamos a hacer una lista desordenada y acá dentro del l nosotros lo que queremos hacer es un g4 s vamos a poner en g4 y Recuerden que antes se hacía así s y ahora vamos a tratar de hacer como se hace en angular 17 si esta es una sola tarea y vamos a hacerlo primero como se hacía antes y después V a tratar de migrar a lo que nos decía a ver si podemos a ver si nos sale acá también necesitamos vamos el índice para poder borrarlo en algún momento as vamos a poner punto y coma Let I igual Index para que también tengamos en esta i índice vamos a hacer enter acá y acá tenemos que Mostrar la tarea y Ah mira me está ayudando acá y exactamente y el botón sí de eliminar tarea este botón de eliminar tarea obviamente tenemos que después eh agregarlo acá sí porque si no obviamente se va a quejar de que no existe este método así que ya lo vamos a agregar esto lo vamos a dejar por ahora así y ahora tenemos que hacer un input sí de type text está bien vamos a poner un Place holder que diga nueva tarea y vamos a hacer un engine model no sé si se acuerdan Por eso yo agregué acá lo que es el form module para poder linkear esta nueva tarea con el engine model Entonces cómo hay que hacer hay que ponerle corchetes y paréntesis Sí y igualarlo a nueva tarea sí de esa forma todo lo que escribamos acá se va a estar poniendo acá sí perfecto bien ya tenemos el input falta una barra y nos falta el botón de agregar Sí vamos a poner click agregar tarea y acá vamos a poner agregar tarea bien tenemos que hacer Entonces agregar tarea y eliminar tarea para que nos deje dar error vamos a hacerlo vamos a ir acá vamos a poner agregar tarea y lo que tenemos que hacer básicamente es agarrar esto de acá y setear entonces vamos a agarrar y vamos a llamar dis gu bajo tarea service punto agregar tarea y le vamos a pasar esta tarea s y bueno básicamente Acá no está nos está diciendo que hay que hacer que básicamente es agregamos la la tarea Esta sí agregar tarea y el nueva tarea que es este lo vamos a setear en vacío para que se borre lo que escribimos y volvemos a trer en la lista de tareas por si hay más sí perfecto básicamente Entonces sería agregamos la nueva tarea con el service utilizando este vaciamos el input Y por último namos la la totalidad de las tareas para actualizar esta información vamos a ver de eliminar tareas eliminar tarea claramente necesitamos el Index si vamos a recibir el Index que es un number sí Y acá nos vamos a estar pasando la i que es el del Index sí Y acá básicamente vamos a hacer dis punto y bajo tarea service como dice acá punto eliminar tarea vamos a pasar el Index este que estamos recibiendo por parámetro Así que es este y una vez hecho esto vamos a volver a getar Entonces vamos a poner dis punto lista tareas igual y hacemos el get para que nos actualice la información sí perfecto ya tenemos entonces todo acá todo acá y todo acá creería que no haría falta más nada vamos a ver bueno ahora sí tengo algo más para decirles porque claramente acá acá no le gustó Algo vamos a tirarlo y volver levantar parece ser que no está identificando este tarea service por algún motivo y ahí está simplemente hubo un error de compilación no más vamos a abrir y vamos a ver si ya está funcionando y ahí está Sí vamos a poner por ejemplo aprender angular agregar tarea y ahí está sí podos eliminarlo de esta forma pero se ve muy feo así que yo les había preparado lo siguiente que es si vamos a nuestro github a mi github mejor dicho al de serg code yo les les preparé lo siguiente pueden ir acá a repositorios a base lista tareas angular y yo les traje un css para que se vea mucho más lindo vamos a agarrar vamos a copiar de acá con este ti vamos a ir al css de acá y lo vamos a pegar Por qué no lo hago esto acá en el mismo curso y porque me parece que es un montón de tiempo poder ir probando y chequeando y me parece que lo más importante es concentrarnos en esta parte sí vamos a ir un poquito a ver cómo se ve y claramente Ahora se ve muchísimo mejor fíjense ponemos Por ejemplo aprender angular agregar tarea perfecto vamos a poner por ejemplo acá aprender react sí perfecto y si nosotros salimos si y volvemos a entrar Qué pasa se mantiene Por qué se mantiene vamos a ir acá application y fíjense que acá se va agregando fíjense acá dice aprender ángulo aprender react si yo borro algo se borra aprender por ejemplo angular con versión 17 Gar tarea si aparece aprender python por ejemplo se va agando cuando yo salgo de acá y vuelvo a entrar lee el local storage lo lee y vuelve a agregar las tareas si no es un backen pero por lo menos tenemos como algún tipo de persistencia en la aplicación para que ustedes puedan entonces de esta forma ya saben utilizar el local el local storage que se hace de esta forma Sí se hace local storage get item sí Para poder eh traerlo del del local storage Y si quieren setear lo se pasa el local storage key que básicamente es este fíjense que así se llama lista tareas y le pasamos el el lo que es el Jason que teníamos que es esa ese objeto lo pasamos stringify Sí vamos a explicar un poquito más en detalle para que ustedes lo puedan entender funciona de la siguiente forma Entonces qué tareas qué es lo que me ofrece es una versión Jason pareada de lo que tiene el local storage entonces get item de la lista de tareas sí Entonces si hubiese más cosas acá hubiera por ejemplo acá eh Ricardo tareas y acá otro más que sea por ejemplo sergi tareas no sé el único que va a buscar va a ser que dice lista tareas no importa que haya más información acá lo único que va a buscar va a ser lista tareas entonces get item y este es la Key Y qué es lo que devuelve el value que es todo esto sí lo mismo Cuando hacemos un set si hacemos un set le pasamos el local storage key y le pasamos la versión stringify del Jason o sea le pasamos la versión String de un Jason no le pasamos el Jason sino una versión String Y de esa forma se setea acá teniendo esto podemos hacer el geteo de todas las tareas agregar una tarea o eliminar una tarea Cómo agregamos la tarea pasándole la tarea y Cómo eliminar la tarea con el Index si haciendo un splice de esta forma tenemos una aplicación chiquitita pero bueno bastante consistente No no sé qué les parece pero está muy buena Así que si les parece vamos a subir esto al repositorio y a netlify para que ya quede listo para poder utilizar también digamos a nivel público poder mostrarlo tambén como un trabajo práctico para ello vamos a ir acá a a lo que es github vamos a armar un repositorio nuevo vamos a poner new vos en el tuyo por supuesto y acá vamos a poner por ejemplo lista tareas curso angular está disponible ponemos crear repositorio y acá tenemos que seguir algunos pasos yo por ahora me voy copiando esta línea sí Y los otros pasos me los acuerdo de memoria Así que simplemente vamos a poner acá control n vamos a tirar esto por ahora con el control c podemos tirar este proceso de hecho eh voy a borrar y voy a volver a a levantar para que esta limpio y vamos a poner Entonces lo siguiente git init para inicializar el el repositorio local perfecto acá vamos a poner git add punto para que agregue todos los archivos git comit y am o gu m y vamos a poner acá terminamos nuestro primer proyecto de lista de tareas en angular 17 y después de comite vamos a pegar entonces la línea que hemos copiado git Remote origin esto y ahora si git Push origin Master Y de esa forma vamos a tener ya subido acá todo vamos a esperar un poquito y listo hacemos f5 y ya tenemos como podemos ver acá nuestra aplicación También queremos subirla a netlify como hemos dicho entonces para ello V a poner npm build para que nos haga la carpeta build Sí vamos a perd npm Run build me había olvidado y con npm rild lo que va a pasar es que nos va a armar una aplicación una distribución sí Para poder subirla a netlify no sé si se acuerdan más al principio del del curso yo les dije que cuando hacemos un build o sea cuando pasamos a la versión de producción todo ese paquete enorme de angular se termina convirtiendo en html css Y javascript entonces fíjense que cuando Hacemos npm bild como se ve acá Entonces nos va a formar este dis sí que es básicamente la y lista de tareas sí perfecto vamos a ver acá que hay una parte de server otra browser etcétera perfecto lo que vamos a hacer entonces es agarrar esa carpeta dis y la vamos a subir a netlify para tener disponible netlify para poder tener disponible nuestra aplicación eh de forma pública vamos a poner login ustedes si no tienen cuenta se la tienen que hacer yo me voy a loguear con github y acá dentro simplemente ponemos add New site vamos a poner deploy manually y simplemente lo que hay que hacer es arrastrar acá todo vamos a ir a lista de tareas lista de tareas app Vamos a entrar vamos a arrastrar la carpeta browser perfecto me puse un nombre horrible herfeld F no sé cuánto vamos a cambiarle el nombre si les parece vamos a poner vamos a ir acá vamos a acá vamos a ir a site configuration y change site name le vamos a poner lista tareas angular 17 save y listo vamos a ver y acá está desado vamos poder vamos a verificar a ver si funciona todo bien como ven acá está plegado y vamos a ver si funciona fíjate que ahora ya local va a ser otro vamos poner acá por ejemplo aprender angular y y aparece si pero desde este sitio ya no es más local storage vamos a ponerlo aprender react No es cierto vamos a guardar y vamos ahora vamos a ir vamos a salir s y vamos a volver a entrar lista de tareas que era medio difícil Vamos a entrar haciendo contr control 3 V a cortar esto y fíjense vamos a entrar de nuevo pegamos enter y sigue ahí porque está guardado en el local storage Sí así que Listo ya tenemos no solamente subido al repositorio para poder tener nuestro portfolio sino que también la tenés publicada de forma eh pública así que tenemos el repositorio de la lista de tareas y la aplicación de forma pública en Nine nos vemos en la siguiente sección último proyecto y se acaba el curso increíble nos vemos ahí señoras y señores vamos con el último proyecto del curso se acaba el curso increíble todo lo que hemos vivido juntos Y vamos a hacer una landing page con angular 17 muy parecida a la que habamos hecho pero con todo todas las herramientas nuevas de ang 17 tu primer proyecto de angular 1 complejo y vas a poder subirlo a tu repositorio y después publicarlo para tenerlo también para mostrarlo en el caso de tu primera entrevista enare vamos a hacerlo primero principal vamos a mantener apretado shift click derecho vamos a abrir el aquí y vamos a hacer una nueva aplicación en vamos a poner landing page angular 17 hacemos enter nos va a preguntar si queremos hacer en ccs lo vamos a hacer en ccs y ahí ha terminado ya tenemos entonces nuestro landing page angular 17 que va a ser nuestra aplicación vamos a abrir visual Studio code vamos a arrastrar la carpeta aquí y vamos a empezar a trabajar Bueno como les había comentado esto tiene algunas diferencias Sí primero principal Acá está el componente principal tenemos las rutas acá que vamos a ir llenando a poquito la configuración donde vamos a proveer por ejemplo en el caso del http lo vamos a poner acá y algunas otras cositas Sí el título sí esto lo vamos a cambiar vamos a empezar haciendo eso vamos a borrar todo salvo acá abajo el router outlet porque el router outlet nosotros necesitamos para que haga el enrutamiento acá a diferencia de el engine module eh Todo esto lo va a trabajar directamente el componente principal como si fuera este el primer modulit sí vamos a ir habiéndolo de poquito primero principal vamos a borrar este de testing que no lo vamos a utilizar perfecto y bien primero principal lo que quiero hacer es hacer varios componentes de páginas Recuerden que vamos a a tener una landing page Así que vamos a hacer un Home una lista de productos y eh al último un contacto en este caso va a ser por ejemplo una empresa de productos vamos a basarnos un poquito en lo que ya vinimos viendo en el curso eh Nada más que ahora lo vamos a hacer con angular 17 y lo vamos a hacer de un solo tirón para que ustedes aprendan a hacerlo un poquito más eh digamos en conjunto digamos no estar dividendo lo que sí les voy a pedir es que digamos eh cualquier duda que tengan vuelvan a la sección correspondiente ya que vamos a ir un poquito más rapidito no voy a ir explicando Punto por punto Porque todo lo que vimos en esta parte ya lo vimos antes sí Ahora es como que estamos haciendo el proyecto voy a ir un poquito más rápido explicando si Qué diferenci hay entre angular 16 y angular 17 sí vamos a ir creando ng generate component vamos a poner pages y vamos a empezar con home Sí primero home vamos a poner acá que no listo vamos a seguir con products listo vamos a seguir con product detail vamos a seguir Entonces ahora sí con con y con eso es más que suficiente ya tenemos entonces todas esas pag sí también vamos a empezar haciendo un service y vamos a poner acá Services appi bueno appi service eso es suficiente Y ahí vamos a tener entonces todas las páginas y además un servicio donde vamos a llamar a la pist de productos vamos de a poquito primero principal acá ya tenemos el router outlet pero necesitamos hacer eh lo que vendría a ser eh la la barra de navegación porque ahora no se va a ver nada primero principal lo que quiero hacer en las rutas vamos a configurarlas para poder Navegar vamos a poner primero p vacío va a llevar al component Home perfecto acá Mira me está dando una manito vamos a hacer cuatro y AC poner products Esto va a ser product component acá vamos a poner product barid para poder hacer uno puntual vamos a poner product detail component poner contact va a ser contact component Y por último vamos a poner que ahí está perfecto lo que me dice el copilot que es si pones cualquier cosa te redirige a vacío O sea a Home bien ya tenemos entonces las rutas y lo que vamos a hacer ahora es poner acá la barra de navegación para poder Navegar si Entonces vamos a abrir bootstrap si vamos a instalarlo primero vamos a ir acá ti vamos a poner acá para instalarlo poner acá se está instalando bootstrap y Recuerden que acá tenemos que en el angular json incorporar tanto el javascript como el ccs propio de de boostrap vamos a ir acá un poquito achicando para que no sea fácil y ponemos acá en el Styles lo que nos recomienda acá nuestro amigo copilot y en Script lo mismo ponemos node modules bar bootstrap Ahí está perfecto y Listo ya tenemos entonces incorporado el Styles y el Script Así que eso y la instalación de bootp ya lo podemos utilizar vamos a ir a buscar un napar Sí este me gusta vamos a pegarlo acá pero quiero uno que sea negro Así que vamos a buscar uno acá abajo abajo abajo abajo abajo abajo este acá dice dat BS Team Dark vamos a copiar esto y vamos a pegarlo acá para que sea negro sí vamos a ir viendo si esto funciona vamos a hacer un npm Start para ver cómo se va Viendo acá vamos a abrir local Host 4200 y ahí está perfecto otra cosa que quiero cambiar es el icono vamos a buscar un fabcon en icon e icon 8 está vamos a poner algo de productos Sí vamos a poner algo de venta a ver venta a ver qué aparece vamos a poner este qué le dicen Ah mira este con los colores de angular 17 este me gusta más vamos a poner así vamos a poner Descargar Acá le vamos a cambiar a todos los archivos para poder verlos vamos a poner ico Sí vamos a poner favicon ico vamos a ir a el escritorio A landing page source y acá está vamos a reemplazar Este sí vamos guardar Sí y si actualizamos esto con control shift r ahí ya aparece el nuevo icono s no se debe ver mucho eh No no llego a ampliarlo esto para que se ve un poquito más grande pero bueno confíen en mí ahí está el icono nuevo bien vamos a ir cambiándole un poquito esto ponerle por ejemplo acá venta productos guardar está venta productos y vamos a quedarnos solamente si les parece con lo que es home si acá y vamos a poner este está que se llame home pero todo esto lo vamos a ir borrando inclusive el active y Acá hay que hacer algunas cosas primero el Home este no se marca así que tenemos también hacerlo en cl recuerden Así vamos a ir de poquito primero principal tenemos que hacer lo que es el router link pero no lo vamos a hacer de esta forma acá Esto es lo que sugirió los sn pero lo vamos a hacer directamente así y acá vamos a poner vacío porque estamos home y así De hecho acá Recuerden que para poder hacer lo del AC tenemos que poner y ponerlo entre y poner que si queremos que sea la clase active debe cumplir por ejemplo que menú selected sea igual a Home y tenemos que hacerle una acción por ejemplo click donde pongamos por option pasarle home no se acuerdan como lo habos hecho pero básicamente acá vamos a pasar que home y en option que vamos ir creando ahora acá vamos a pasarle por ejemplo acá menú option los puntos String y vamos a crear acá primero principal una menú option así se llamaba menú Select vamos a poner menú option me gusta más Sí vamos a poner menú option dos puntos String vamos a empezarlo en vacío Ah no vamos a empezarlo en No sí vamos a empezarlo en vacío Sí vamos a empezarlo en vacío y acá en un option vamos a y poner perfecto di menú option option Entonces ya sabemos que cuando sea la opción va a estar en negrita vamos a ver si esto funciona bien Ah antes de esto eh tenemos que incorporar router active esto cambi un poquito este router link ahora para que funcione en angular 17 lo tenemos que incorporar como import ya que no tenemos más el modul y cuando ponemos esto fíjense que ahora me va a permitir hacerle clic Sí y si le hacemos clic fíjense que ya queda blanco porque ya entendió que está en el Home muy bien perfecto ya tenemos un poquito más adelantado esto ahora tenemos que hacer tres de estos sí que son products vamos a chequear un poquito esto products y contact Aunque podemos ponero en español no productos porque está acá en español no vamos a poner todo en inglés vamos a poner best products sí perfecto en inglés y acá esto lo escribí como quise contact ahí está y acá vamos poner entonces acá products products y acá contact contact un poquito todo esto guardamos y vamos a ver si esto está funcionando y ahí está best products home product contact vamos a ver si esto funciona no le está gustando algo Ah Es porque está todo vacío acá acá no Olvidos poner products contact guardar Ahí está perfecto vemos que ahí arriba está cambiando y acá también y si ponemos products ponemos barra un nos lleva a a ver esto a ver acá en las rutas que pasó Ah nos falto era una barra a ver ahora barra un y ahí está product detail works si Perfecto entonces home product products y en el product si ponemos un barra un llama al detalle bien vamos a ir con el Home vamos a cerrar todo esto vamos a cerrar esto acá vamos a concentrarnos en el Home vamos a hacer una hermosa landing page vamos a poner h1 Welcome to Our selling page no sé si se dice selling Market Market web Ahí está Welcome to Welcome to Our Market web vamos a poner acá we sell the best products y vamos a poner algún alguna imagen vamos a buscar acá por ejemplo en pixels que hay imágenes gratis poner por eemplo productos vamos a ver a ver alguno que podos poner a ver a ver a ver a ver a ver este me gusta Qué les parece descarga gratuita acá le pueden donar si quieren a Carolina gravosa y acá vamos poner que Recuerden que es la carpeta de archivos estáticos vamos a poner image vamos a cerrar esto y acá vamos a hacer lo mismo Poner image y acá vamos a poner dos puntos barra dos puntos barra dos puntos barra assets image.jpg y acá vamos a poner productos y vamos a guardar bien se ve gigante la imagen vamos a acomodar un poco todo esto vamos a poner todo esto dentro de un div Sí vamos acomodar y acá le vamos a poner Class por ejemplo container pero le vamos a dar algunas cositas particulares Sí vamos a poner display grid Sí y justify items Center vamos a ver si así se acomoda Perfecto ahí está un poco mejor ahora lo que tenemos que hacer es que se achique la imagen as que vamos a poner ahí está pero vamos a poner 75 y 75 y ahí mejoró un montón a ver si esto lo borro no perdón el justify content hay que borar ahí está perfecto Sí y ya tenemos Entonces más o menos acá nuestra entrada a la a la landing page Sí por supuesto ustedes hacer muchísimas más cosas y va a quedar mucho más lindo vamos a la parte de productos para poder hacer la parte de productos claramente necesitamos hacer el el llamado al service Así que vamos a ir a la appi falsa recuerdan app products y vamos a hacer solamente en este caso el get all y el get individual Así que vamos a seleccionar esta parte que es el https bar barra hasta products no incluyendo el uno y vamos a ir a apis service Sí y recuerden hacíamos acá vamos a inyectar como se hace en angular 16 o 17 vamos a utilizar private y bajo http igual inject y vamos a poner acá htp client dos puntos coma vamos a poner private URL base que va a ser stram y vamos a poner esto que copiamos coma y además de esto quiero entonces Llamar a los servicios Enton vamos poner prod que va a devolver un observable vamos a poner por ahora Any pero despu vamos tratar de hacer el observable correspondiente con el modelo y ahí está perfecto y vamos a get product get product byid as Perfecto ahí perfecto por y lo mandamos por AC perfecto tenemos nuestra clase pero para poder usar http client acá cambia como no tenemos el engio module tenemos que utilizar un Provider para poder digamos consumir el http client Cómo se hace vamos acá a app config vamos a hacerle enter acá enter acá vamos a poner coma Perdón acá arriba Vamos a poner coma coma y acá vamos a poner Provider provide http client abrimos y cerramos y listo con esto ya va a funcionar s bien tenemos todo esto vamos a ir a products y lo primero que tenemos que hacer es eh básicamente Mostrar los productos Sí vamos a hacer a poner h1 This is Our products dos puntos y acá vamos a poner una tabla vamos a buscar tabla perfecto Esto está bien Vamos a pegar acá y vamos a borrar todo esto y esto también s product price description y también le vamos a poner detail details s vamos una maca que va a hacer un botón Ya lo vamos a hacer después vamos ir viendo cómo se va viendo s a ver cómo se ve perfecto a ver si hay una tabla má más oscura vamos a ver si esta la podemos hacer para que se vea oscura también así hacemos algo diferente lo que hicimos en el curso un poco a ver si podemos poner esto así a ver esa se por ahí podríamos poner est esto negro y las letras blancas ahora vamos a ver si podemos hacerlo vamos a ir acá al ccs y por ahí tenemos que meter todo esto en un div un div acá que diga Class Styles o general Styles guardar y acá en el css emos general Styles y ponemos background color Black color White perfecto guardamos ahí perfecto par abo es como no lga vamos a ver Hacemos como que la página termin acando deito buo primero principal que quiero hacer en productos también es meterlo en un container cl container poito eligo un poco mejor y bueno claramente AC en details vamos a poner un botón Bom V a poner Class btn btn outline primary ponerle acá details perfecto bien entonces ya tenemos un poquito mejor esto ahora lo que queremos hacer es consumir el backend y que esto claramente consuma consuma el back vamos ir acá y vamos a hacer de poquito las ines Prim vamos inar vamos a poner prate B service ig inject perfecto traemos de acá el in también hay que traerlo perfecto acom un poquito vamos poner entonces produ poner por ahora que sea vacío poner Any Así ya vamos a reemplazar este en y los otros en por el modelo cuando cuando hagamos del producto un poquito más completo no se preocupen ya vamos a reemplazar bien ya tenemos y lo que queremos rellenar justamente Entonces vamos a hacer el implement on init vamos a traerlo y acá ponemos quick fix para que nos hagamos rápido de el poquito acando todo esto y acá vamos a poner apice get products todo esto está perfecto y ahí vamos a guardar y AC me falt un paréntesis Perfecto ahí va ya tenemos entonces después de que se LL el producto a los productos que se llene la tabla perfecto vamos a hacer un cons log de esto a conso log de Data a ver si funciona y ya está funcionando si ven que está funcionando bueno como está funcionando lo que hay que hacer es lo siguiente vamos a hacer lo que hemos hecho del quick io vamos a poner acá poner Open quick Ty io y bueno justo acá habíamos dejado todo listo se recuerdan que habíamos puesto esto acá pero lo vamos a hacer de nuevo voy a ver el postman postman acá lo tengo digamos que era básicamente Llamar al al pemos get perd y acá tenemos lo que nos devuelve vamos a hacer control a para seleccionar todo control C para copiar vamos a ir acá a qui pegamos ponemos entonces acá el nombre por ejemplo que ustedes quieran Jon tyt interfac esto tengo sado porque lo habamos visto durante el curso me quedo me copio esto y vamos a hacer el modelo dentro de la de App vamos a hacer una carpeta sm models y acá dentro vamos a poner entonces eh product model.ts y acá pegamos Esto sí entonces podemos utilizar la interfaz de producto para todos lados vamos a ponerlo acá perfecto esto también tiki eh bien y nos falta también eh acá en el servicio Sí vamos aar un poquito todo esto vamos ir al servicio y acá también no es de un observable de sino que es un observable de product array acá también tengos que poner que va a estar haciendo esa búsqueda s vamos a a traerlo esto ti Y acá es de I product y lo mismo acá ti entonces este Recuerden que va con con corchete porque es una Ray y este no porque es uno solo perfecto ahora tenemos ya tenemos eh utilizada la interfaz acá acá y también en en product sí bien entonces lo que tenemos que hacer es básicamente ahora incorporarlo ya sabemos más o menos De qué trata esto tenemos que ir a a products html y empezar a hacer un eh bucle for pero recuerden que ahora este TR que es el el que estoy el que tengo que hacer el bucle lo tenemos que meter adentro de un for Entonces vamos a poner for block y ahí tenemos alguna alguna información primero principal tenemos que en vez deems va a ser no me acuerdo vamos Bucar acá produc prod acá tenemos para trar por Index fíjense está buenísimo eso poner produ bien Y acá tenem adentro de esto a lo que queremos que se repita ahí perfecto poquito código y entonces tenemos product Y tenemos acá product.id si no me equivoco aquí era product title era as creo que s vamos a copiar esto para que un poquito más rápido acá punto price vamos ponerle un Pipe de currency y acá description y lo que es details necesitamos hacer un click o se escuchar un click y que vayamos a la op Navigate Navigate y tenemos que pasarle por ejemplo product vamos a crear Navigate va recibir entonces ID number y Ah ser un cons vamos a el tema de la navegación vamos a ver esto un poquito cómo está y ya está fíjense buenísimo nos está rellenando toda esta información y si tocamos details Debería ser el console ti 1 dos 3 perfecto ahora lo que tenemos hacer que cuando toquemos uno de estos navegue si a Barra products cómo se hacía eso bueno primero principal tenemos que incorporar vamos a hacer private bajo router igual in router perfecto vamos a traerlo y vamos a ver si esto funciona dis pun router router Navigate product ID products barid y ahí está perfecto estamos navegando uno navegando dos navegando tres y acá dice produ detail works bien otra cosa que tenemos que hacer es claramente armarnos el el digamos lo que es el product detail vamos a ir allá vamos al product detail y primero principal acá vamos a poner entonces Bueno lo que va a recibir no poner h1 Buy or product vamos a poner así a ver si perfecto y acá abajo vamos a ir poniendo algunas cositas esto vamos a borrar lo que es el archivo de testing no lo vamos a utilizar Pero bueno tenemos primero principal poder leer en dónde estamos parados Así que vamos a hacer private router active o bajo router active Mejor dicho igual Road inject activate to Road vo a poner de hecho bien bajo Road va a ser más fácil e incorporamos esto perfecto bien ya tenemos esto vamos a implementar el oninit con init perfecto vamos a poner entonces un loading que empiece en true tipo perfecto y el hay que incorporarlo AC arriba onit listo y ahora tenemos que incorporar acá el poner abajo y lo que vamos a hacer acá es lo siguiente También tenemos que traernos igual el service Perfecto ahí va y acá tenemos que hacer Entonces dis punto Road param subscribe perfecto y ahí está este product no esto era get product y esto así perfecto Esto va a ser de tipo I product Sí y necesitamos también setear eh acá el producto que vamos a mostrar sería vamos a poner public product de tipo de tipo product que va a empezar siendo no va a empezar siendo nada Vamos a ponerle acá pregunta sea que va a empezar siendo nada s bien Vamos a hacer un consol de esto para ir viendo a ver qué onda acá no le está gustando esto porque me comí algún algún símbolo Ahí está me hab comido el paréntesis y ahí está vamos verá el cons y ya me está haciendo porque está buscando el tres y fíjense que me trae toda la información bien Vamos a construir Entonces vamos a comar un poquito todo esto me gusta más cuando se ve así bien vamos entonces a poner Ah y acá está el log inf sí Entonces vamos a poner así vamos a poner If loading Entonces vamos a mostrar un h1 diciendo o un H si un h1 es mucho vamos Mostrar un h5 poniendo loading sí If no loading Entonces vamos a poner el resto de las cosas Sí vamos a empezar estamos usando esto que es propio de angular 17 sí que ya lo vimos en la sección anterior y en el caso entonces de que ya no sea loading vamos a empezar a cargar todo primero principal ent vamos a poner title entonces product title vamos a poner un h2 igual como lo hemos hecho hecho con una tarjeta no no vamos a buscar una tarjetita me gustaba más la ide la tarjeta V a poner Card acá y ahí está me gusta mucho más esto de la tarjeta qué dicen s vamos a copiar una tarjeta acá mucho mejor vamos a poner damente una tarjeta comamos un poco y la imagen Entonces sería product image acá vamos a poner sea product title acá va a ser también product punto title acá va a ser description claramente vamos a chequearlo un poquito product description y Y también vamos a poner el precio acá H 4 vamos a poner product price vamos a poner currency acá currency y vamos a hacer porque este no le gusta Ah porque Pon pregunta acá porque puede ser indefinido igual que acá sí ahí va ahora vamos a ver cómo se va viendo Ah Ya sé por qué porque estamos poniendo nos podamos ponerle dis pun product ig Data s y ahí apareció perfecto buenísimo eh lo que sí no me gusta mucho es que está acá un costado capaz que lo ideal sería entonces ponerlo en un dip claro el dip entero dentro de otro dip quizás todo esto vamos a ponerlo dentro de un di que sea Class container y este Class container le vamos a poner que vaya al medio vamos a poner Entonces por ejemplo punto container Vamos a ponerle display Flex voy a poner justify content Center a ver ahora Ahí va eh buen está bastante bien vamos a dejarlo así me parece que está bastante bastante bien Cualquier cosa ustedes lo pueden por supuesto tunear un poquito más para que quede más lindo Sí así que va bien perfecto y bueno vamos con contact ahora que vendría a ser esto vamos a cerrarlo esto también es un formulario vamos a poner entonces un form vamos a poner si est un form y vamos a poner por ejemplo ññ Acá está un mail un text arrea Esto me gusta a ver vamos a ir acá al contact html vamos a poner esto vamos un poquito y vamos a ir viendo cómo se ve tenemos perfecto vamos ponerlo dentro container cl container y bien acá para que no se vea así lo que vamos hacer acá en el container podemos ponerle punto container y ponerle un pading bottom de unos 350 que estamos Ah va así podemos utilizarlo bien aunque clar hizo el form nada AC como un poco pelado esto A ver vamos a ver si si podemos traernos el form mejor y uno que me gustaba de errores también validation parece que este traía todo este Está bueno Mira este este actúa directamente perfecto vamos a hacer esto vamos a copiar acá parece que está mucho mejor y lo vamos a poner acá dentro tiki y ahí está mejor sí pemos submit form acá el submit form lo que tiene malo es que como está haciendo submit claramente eh Me está actualizando el formulario Esto no es lo que yo quiero Entonces vamos a hacer lo siguiente vamos a poner submit acá y vamos a poner enviar y vamos a poner acá event para poder cancelar el el la actualización de la página acá pemos event event y con el event prent default vamos a poder hacer que no se actualice la página aparte fíjense que se actualiz está muy bueno esto y bien acá tenemos varias formas podos hacer varias cosas nosotros lo que podemos hacer es tomar y hacer con el for control como hamos hecho antes en vez de acá poner los require y etctera podríamos hacer entonces lo del form control por ejemplo acá vamos a poner en vez de los require de esta forma vamos a poner entonces acá primero acá tenemos Poner reac mod perfecto y acá tenemos ent Poner contact form tipo form grp también vamos a iniciarlo Así vamos a poner implements on init Sí también vamos a ponerlo acá arriba tenemos que arrancarlo poner un poquito más abajo solo Vamos a utilizar esto y acá tenemos que armar un constructor y en el constructor recuerden tenemos que hacer la incorporación de eh lo del formulario sí ponemos entonces private F builder from builder perfecto acá vamos a traer este form builder este mismo lado y vamos a agarrar el contact form this contact form perfecto form builder form Group y acá vamos a poner por ejemplo alguno de estos si se me hizo un poco largo acá capaz vamos a borrar alguno de estos vamos a dejar como estaba antes parece que finalmente terminan siendo muchos así vamos a poner solamente estos dos Si no vamos a estar mucho y es para dar un ejemplo Así que vamos a poner directamente estos dos un poquito y estoy copiando esto que van a ser mail y el example Pero tenemos AC el formulario submit y acá poner por ejemplo mensaje o message poner mail bien desp vamos a seguir viendo esto pero en principio acá para no tener Alo tan grande poner mail email vacío va ser validators require pero su vez también va a ser validator email perfecto vamos a incorporar también aquí perfecto y además del email recuerden También queremos el message perfecto acá por ejemp 10 Así que también está muy bueno esto Me está faltando acá un paréntesis y acomodo un poquito y ya está bien Vamos a guardar no falta entonces hacerlo poner los form control acá vamos a chequear esto y esto para para poder hacerlo Tenemos que poner acá entonces que el form Group se va a llamar eh contact form sí perfecto acá en vez de signo de pregunta deos poner signo de admiración si no se queja Ahí está perfecto signo de admiración quiere decir que nunca va a ser nul o que nos comprometemos a que nunca sea nul y listo perfecto ahora sí tenemos entonces Space holder bien acá vamos a poner entonces que va a ser form control que va a ser email form control name que va a ser email perfecto y acá form control name que va a ser message sí message bien guardamos y el submit lo que va a hacer es Llamar a enviar Esto va a prevenir que se reinicie y va a ser un consol loog de El event Y también vamos a hacer un consol del contact form sí punto V perfecto vamos a ver que a ver si funciona contact vamos a poner por ejemplo acá Ricardo @gmail.com y acá V a poner submit y ahí está enviando el mail y el mensaje si nos faltaría a ver los errores Recuerden que hemos visto eso vamos a hacer un spam en cada uno span y otro span acá que digan que sean los dos ambos clases Class text dunger y en este caso va a decir you have to complete this fi en el caso que sea obligatorio y nos falta otro que sea invalid email format y acá otro que diga cuos caracteres era el mínimo 10 10 perfecto Ah tenemos que hacer un manejo de errores de esto se acuerdan vamos poner lo siguiente principal también vamos vamos ir acando un poquito esto enters sea fácil y AC lo mismo ti tiki tamb podemos poner 10 para que se un poquito más amplio C para se un poquito más amplio y bien acá tenemos que poner un ng cl y acá también acá y acá que este me quedó lejos acá y acá entonces un ng cl habíamos dicho que est escuchando Que nos ponga la clase invalid Cómo era esto habemos dicho que era Cómo era la is invalid No acá el rojo es is invalid si is válido is invalid entonces a poner is invalid cuando dos puntos es cuando has errors y acá le vamos a pasar en este caso son dos parámetros se acuerdan que habíamos hecho este has error ahora lo vamos a volver hacer también lo vamos a poner acá vamos a hacer un vamos a utilizar el nuevo que es el If Sí sí ahí vamos a poner este acá tiki y vamos a poner si tiene has errors y le tengos que pasar email y require primero No perfecto vamos a armar otro más y en este caso ha email pero eh email Sí este de acá V a ponerlo acá y lo borramos perfecto y esto mismo lo vamos a copiar acá Sí nada más que esto Ah Esto está bien Esto es igual pero esto sí cambia y en vez de email acá va a ser message sí message message y acá en vez de eh de email que va a ser el validador de email va a ser min length Sí así Ahora tenemos que crear el has errors sí acá también acá también era hay que copiar este o este sí se acuerdan que hemos hecho ahí fíjense que ahí me lo está diciendo y esto mismo vamos a tratar de copiarlo acá nada más que email no sino que es message message y Main length todo esto Si no si no se acuerdan lo habemos visto durante el curso básicamente es vamos a hacer ahora un has error acá que va a recibir el Field Sí pero también va a recibir eh el type eh error sí perfecto y acá va a ser lo siguiente vamos a poner this contact form punto get fill O sea que vamos a estar buscando Cuál de estos dos corresponde has error type error and stouch Sí vamos a ver si funciona y funciona perfecto acá si ponemos cualquier cosa invalid format acá si pemos poquitos dice pero lo que no está haciendo es haciendo el marco o sea que no está funcionando bien el ng Class vamos a ver acá seguramente es porque nos faltó ponerlo entre corchetes y acá también y esto también hay que ponerlo así entre comillas y vamos a ver si ahora arranca A ver vamos a tirarle volver a levantar vamos a ver si esto funciona así Ah y también hay que incorporarlo acá sí vamos a ver si ahí está perfecto nos hos olvidado incorporarlo acá también Recuerden que como ahora Estamos en angular 17 todo hay que incorporarlo acá en el imports lo guardamos y vamos a ver si ya funciona y perfecto no está marcando en rojo no está marcando en rojo ponemos así así y dice invalid invalid y pemos y nos trae la información me parece que esto ha sido más que suficiente para este hermoso curso fíjense que está funcionando bárbaro todo esto estoy muy contento de lo lo que hemos hecho y vamos a hacer ahora s subirlo al repositorio y publicarlo para que ya nos quede vamos a abrir git github.com V poner barra serg code vamos a hacer un repositorio nuevo New vamos a poner landing page angular 17 perfecto cre reposit no vamos a copiar esta línea si acuérdense que es la que usamos y vamos a hacer lo siguiente ponemos git init kit add punto para agregar todo kit commit un m hicimos una landing page en angular 17 pegamos esto y git Push origin Master Entonces ahora si vamos acá si vamos acá hacemos f5 y ya está subido nuestro proyecto y ahora vamos a hacerlo eh vamos a publicar NF para eso tenemos poner npm Run build para que nos arme nuestra versión de producción de bilo y vamos a ir a netf ponemos NF nos lamos estamos New site deploy manually y acá tenemos que arrastar recuerden la carpeta que dice browser vamos a ver si se puede rar desde acá ponemos no me deja vamos a poner acá para ir buscándolo vamos acá dentro dis landing page y el que dice browser pemos subir subir esperamos unos segundos y ahí está vamos a ir a cambiarle el nombre Porque p un nombre espantoso Magic and Dolphin un espanto s configuration y le vamos a cambiar el nombre a por ejemplo landing p angular 17 save Y si vamos a nuestro sitio acá tiki ya tenemos nuestro hermoso sitio funcionando de forma subido a al servidor de netf sí Bueno espero que estén contentos la verdad que yo estoy muy contento con este curso hemos visto angular 16 angular 17 hemos visto cómo se hacía antes Cómo se haca ahora la verdad que yo estoy s super contento no puedo pedir más la verdad que bueno Espero que les sirva la verdad que lo hice con mucho amor es un curso mucho más largo que el resto Porque es una tecnología que manejo bastante bien Así que espero que lo disfruten les Sira para conseguir su primer trabajo y nos vemos en el siguiente curso chao qué increíble todo lo que vivimos en este curso un montón de secciones un montón de cosas angular 16 angular 17 Estás totalmente al día el primer curso en español que tiene toda la actualización de angular angular desde cero hasta angular 17 lo nuevo increíble La verdad estoy muy feliz de haber podido hacer este curso Espero que les haya servido y bueno después mándenme mensajitos a ver cómo les fue con la práctica y si les gustó el curso angular es muy utilizado por empresas que buscan robustez Así que vos puedes ser el próximo candidato a alguna de estas empresas nos vemos en el siguiente curso y muchas gracias por acompañarme suscribite que es gratis y me ayudas un montón nos vemos