Bienvenidos en esta clase, vamos a ver cómo cambiar el formato, pero directamente en nuestra plantilla,
en nuestra lista, utilizando los pipe.
Básicamente los pipe son filtros que se aplican a variables que tenemos en las vistas y la podemos formatear.
Por ejemplo, un texto convertirlo minuscula, convertirlo a mayúscula, formatear la fecha.
Exactamente lo mismo que hemos hecho utilizando el operador MAP en el observable, pero acá directamente
en la plantilla, en la vista.
Bien, vamos al código, vamos al lío.
Lo primero en nuestra clase servis, vamos a comentar, vamos a comentar el formato de la fecha, solamente
la fecha.
El percance del nombre lo dejamos tal cual.
Pero vamos ahora formatear nuestra fecha directamente en la vista, en la plantilla.
Esa es la idea.
Guardamos.
Si actualizamos la página, vemos que la fecha volvió al formato original, todavía sin formato alguno.
Partamos por el apellido.
Vamos a convertir el apellido en mayúscula usando Pipe.
Entonces en clientes vamos a la plantilla.
En este caso cliente component.
HTML.
Quiero convertir el apellido simplemente con el carácter vertical conocido como Pipe.
De ahí el nombre.
Colocamos a parqués.
Si guardamos y observamos el navegador, automáticamente notamos el cambio.
Ahora también está el apellido en mayúscula.
Veamos la fecha con el formato.
Vamos a ir al credit.
Vamos a agregar nuestro carácter.
Pipe date dos punto.
Y acá abrimos comillas.
En las comilla indicamos el patrón o el formato que le queramos.
Por ejemplo, usemos el mismo que teníamos en la clase servis.
Como lo tenemos comentado, simplemente copiamos, vamos acá y pegamos, guardamos.
Perfecto.
Hoy cambió el formato, pero si se fijan vuelve a aparecer con el que en inglés.
Por qué?
Por la simple razón que en la clase servis estábamos asignando, el que de forma explícita acá.
Ya sea si usamos el de Pipe o si usamos el format dat, pero la plantilla la dicta.
No tenemos esa opción para cambiar el look, pero sí Angular nos permite cambiar una constante que se
llama lo que Heidy, que para toda la aplicación.
Y es justamente de ahí de donde obtienes que todos los pips.
Todas estas funciones que formatea en datos en la vista obtienen de ahí la localización.
Entonces tenemos que configurar esta constante el bloque Heidy en nuestra aplicación en el app Module.
Vamos a la documentación.
Si nos vamos a la página oficial de Angular y buscamos por lo local Heidy con guión bajo y en mayúscula
y en API local Heidy hacemos clic y vemos que es una constante pero es configurable.
Acá provee un token para asignar local de nuestra aplicación.
Es usado por ejemplo para extraer textos multi lenguajes, también para proveer localización internacionalización
en los pipe.
Acá tenemos el tag pipe plural русский язык rense décima alpi percent pipe.
En fin.
Entonces tenemos que configurar este.
Si tienes que registrar como un providers con nuestra localización en el app Motul, entonces simplemente
vamos a copiar completamente desde las llaves hasta las llaves sin los corchetes.
El probit con la constante y le asignamos el valor.
La copiamos, nos vamos al app module.
Bajamos hasta los providers y acá simplemente una coma y lo pegamos bien.
Es lo que hay.
Di es una constante que le tenemos que importar.
Dedonde de angular core.
Después de en module una coma y lo que Heidy perfecto tenemos registrado el español el s.
Entonces acá tenemos que ser consecuente y colocar s en minúscula.
Guardamos y vamos a revisar y ahí está funcionando todo en español y eso sería todo.
Nos vemos.