1
00:00:00,180 --> 00:00:05,400
Bienvenidos en esta clase, vamos a ver cómo cambiar el formato, pero directamente en nuestra plantilla,

2
00:00:05,490 --> 00:00:07,500
en nuestra lista, utilizando los pipe.

3
00:00:07,590 --> 00:00:13,750
Básicamente los pipe son filtros que se aplican a variables que tenemos en las vistas y la podemos formatear.

4
00:00:13,770 --> 00:00:19,530
Por ejemplo, un texto convertirlo minuscula, convertirlo a mayúscula, formatear la fecha.

5
00:00:19,620 --> 00:00:27,150
Exactamente lo mismo que hemos hecho utilizando el operador MAP en el observable, pero acá directamente

6
00:00:27,240 --> 00:00:28,800
en la plantilla, en la vista.

7
00:00:28,930 --> 00:00:31,050
Bien, vamos al código, vamos al lío.

8
00:00:31,170 --> 00:00:38,460
Lo primero en nuestra clase servis, vamos a comentar, vamos a comentar el formato de la fecha, solamente

9
00:00:38,490 --> 00:00:38,910
la fecha.

10
00:00:39,450 --> 00:00:42,390
El percance del nombre lo dejamos tal cual.

11
00:00:43,020 --> 00:00:48,600
Pero vamos ahora formatear nuestra fecha directamente en la vista, en la plantilla.

12
00:00:48,720 --> 00:00:49,290
Esa es la idea.

13
00:00:49,410 --> 00:00:50,070
Guardamos.

14
00:00:50,430 --> 00:00:57,180
Si actualizamos la página, vemos que la fecha volvió al formato original, todavía sin formato alguno.

15
00:00:57,270 --> 00:00:58,710
Partamos por el apellido.

16
00:00:58,860 --> 00:01:02,190
Vamos a convertir el apellido en mayúscula usando Pipe.

17
00:01:02,520 --> 00:01:05,310
Entonces en clientes vamos a la plantilla.

18
00:01:05,370 --> 00:01:07,050
En este caso cliente component.

19
00:01:07,140 --> 00:01:07,740
HTML.

20
00:01:08,640 --> 00:01:14,310
Quiero convertir el apellido simplemente con el carácter vertical conocido como Pipe.

21
00:01:14,430 --> 00:01:15,570
De ahí el nombre.

22
00:01:15,630 --> 00:01:17,100
Colocamos a parqués.

23
00:01:19,080 --> 00:01:22,980
Si guardamos y observamos el navegador, automáticamente notamos el cambio.

24
00:01:23,040 --> 00:01:25,770
Ahora también está el apellido en mayúscula.

25
00:01:25,950 --> 00:01:28,140
Veamos la fecha con el formato.

26
00:01:28,290 --> 00:01:29,460
Vamos a ir al credit.

27
00:01:30,150 --> 00:01:32,010
Vamos a agregar nuestro carácter.

28
00:01:32,010 --> 00:01:34,800
Pipe date dos punto.

29
00:01:34,890 --> 00:01:36,270
Y acá abrimos comillas.

30
00:01:36,390 --> 00:01:40,080
En las comilla indicamos el patrón o el formato que le queramos.

31
00:01:40,230 --> 00:01:43,980
Por ejemplo, usemos el mismo que teníamos en la clase servis.

32
00:01:44,950 --> 00:01:51,520
Como lo tenemos comentado, simplemente copiamos, vamos acá y pegamos, guardamos.

33
00:01:52,000 --> 00:01:52,660
Perfecto.

34
00:01:52,780 --> 00:01:58,300
Hoy cambió el formato, pero si se fijan vuelve a aparecer con el que en inglés.

35
00:01:58,330 --> 00:01:58,960
Por qué?

36
00:01:59,140 --> 00:02:05,560
Por la simple razón que en la clase servis estábamos asignando, el que de forma explícita acá.

37
00:02:05,710 --> 00:02:11,890
Ya sea si usamos el de Pipe o si usamos el format dat, pero la plantilla la dicta.

38
00:02:11,980 --> 00:02:17,260
No tenemos esa opción para cambiar el look, pero sí Angular nos permite cambiar una constante que se

39
00:02:17,260 --> 00:02:19,960
llama lo que Heidy, que para toda la aplicación.

40
00:02:20,050 --> 00:02:23,860
Y es justamente de ahí de donde obtienes que todos los pips.

41
00:02:23,890 --> 00:02:28,270
Todas estas funciones que formatea en datos en la vista obtienen de ahí la localización.

42
00:02:28,330 --> 00:02:34,600
Entonces tenemos que configurar esta constante el bloque Heidy en nuestra aplicación en el app Module.

43
00:02:34,690 --> 00:02:35,920
Vamos a la documentación.

44
00:02:36,580 --> 00:02:42,790
Si nos vamos a la página oficial de Angular y buscamos por lo local Heidy con guión bajo y en mayúscula

45
00:02:45,370 --> 00:02:51,670
y en API local Heidy hacemos clic y vemos que es una constante pero es configurable.

46
00:02:51,820 --> 00:02:56,380
Acá provee un token para asignar local de nuestra aplicación.

47
00:02:56,440 --> 00:03:03,460
Es usado por ejemplo para extraer textos multi lenguajes, también para proveer localización internacionalización

48
00:03:03,520 --> 00:03:04,180
en los pipe.

49
00:03:04,240 --> 00:03:09,430
Acá tenemos el tag pipe plural русский язык rense décima alpi percent pipe.

50
00:03:09,490 --> 00:03:09,950
En fin.

51
00:03:10,510 --> 00:03:12,180
Entonces tenemos que configurar este.

52
00:03:12,250 --> 00:03:18,460
Si tienes que registrar como un providers con nuestra localización en el app Motul, entonces simplemente

53
00:03:18,670 --> 00:03:24,190
vamos a copiar completamente desde las llaves hasta las llaves sin los corchetes.

54
00:03:24,310 --> 00:03:27,070
El probit con la constante y le asignamos el valor.

55
00:03:27,160 --> 00:03:29,620
La copiamos, nos vamos al app module.

56
00:03:30,520 --> 00:03:35,890
Bajamos hasta los providers y acá simplemente una coma y lo pegamos bien.

57
00:03:35,990 --> 00:03:36,950
Es lo que hay.

58
00:03:36,970 --> 00:03:39,700
Di es una constante que le tenemos que importar.

59
00:03:39,760 --> 00:03:41,900
Dedonde de angular core.

60
00:03:42,670 --> 00:03:51,460
Después de en module una coma y lo que Heidy perfecto tenemos registrado el español el s.

61
00:03:51,580 --> 00:03:55,990
Entonces acá tenemos que ser consecuente y colocar s en minúscula.

62
00:03:56,230 --> 00:04:01,570
Guardamos y vamos a revisar y ahí está funcionando todo en español y eso sería todo.

63
00:04:01,690 --> 00:04:02,320
Nos vemos.