1
00:00:03,649 --> 00:00:10,244
Es hora de empezar con la primera tarea de este curso.

2
00:00:10,244 --> 00:00:14,564
En esta tarea, trabajarás con componentes angulares.

3
00:00:14,564 --> 00:00:18,172
Crearás un nuevo componente llamado dishdetail

4
00:00:18,172 --> 00:00:21,690
para añadirlo a tu aplicación angular,

5
00:00:21,690 --> 00:00:29,399
y actualizarás su plantilla, para que muestre los detalles de un plato específico.

6
00:00:29,399 --> 00:00:37,645
Anteriormente, en el ejercicio anterior, introdujimos una tarjeta en nuestro componente de menú.

7
00:00:37,645 --> 00:00:41,954
Vamos a quitar esa tarjeta, y en su lugar incluir el componente de detalle

8
00:00:41,954 --> 00:00:46,929
en lugar de esa tarjeta para que el componente

9
00:00:46,929 --> 00:00:53,009
detalle pueda mostrar su información

10
00:00:53,009 --> 00:00:56,263
en esa parte de la pantalla.

11
00:00:56,263 --> 00:01:01,435
Su primera tarea es crear el componente dishdetail.

12
00:01:01,435 --> 00:01:08,060
Al final de la primera tarea, una vez que haya creado el componente dishdetail,

13
00:01:08,060 --> 00:01:11,810
luego, en el archivo de plantilla de componentes del menú,

14
00:01:11,810 --> 00:01:18,020
va a reemplazar esa tarjeta por el selector

15
00:01:18,020 --> 00:01:19,430
del componente dishdetail allí,

16
00:01:19,430 --> 00:01:23,510
para que los detalles del componente dishdetail se muestren

17
00:01:23,510 --> 00:01:27,579
justo debajo del menú en el componente de menú.

18
00:01:27,579 --> 00:01:31,564
Ya hemos visto cómo se puede agregar ese selector

19
00:01:31,564 --> 00:01:35,750
de un componente a otro componente.

20
00:01:35,750 --> 00:01:37,693
Cuando creamos el componente de menú,

21
00:01:37,693 --> 00:01:41,500
incluimos eso en el componente de aplicación,

22
00:01:41,500 --> 00:01:48,710
para que al final de la primera tarea, este sería el resultado en su navegador,

23
00:01:48,710 --> 00:01:53,454
donde, en lugar de la tarjeta que muestra los detalles del plato,

24
00:01:53,454 --> 00:01:58,920
verá estas palabras llamadas «dishdetail works!» en la parte inferior de la página.

25
00:01:58,920 --> 00:02:02,390
Una vez que complete esto, entonces descargará

26
00:02:02,390 --> 00:02:09,349
un archivo de plantilla de componentes dishdetail preconfigurado con algunas piezas faltantes,

27
00:02:09,349 --> 00:02:18,474
y luego reemplazará en su lugar en la plantilla de su componente dishdetail.

28
00:02:18,474 --> 00:02:24,439
Una vez que reemplace la plantilla del componente dishdetail suministrado,

29
00:02:24,439 --> 00:02:31,474
, verá la página actualizada así.

30
00:02:31,474 --> 00:02:35,692
Por lo tanto, verá dos partes en la página aquí, una que dice

31
00:02:35,692 --> 00:02:39,480
«Mostrar los detalles del plato aquí».

32
00:02:39,480 --> 00:02:43,909
Vas a estar usando un componente de tarjeta para crear los detalles del plato,

33
00:02:43,909 --> 00:02:47,145
y mostrar ese plato aquí.

34
00:02:47,145 --> 00:02:52,009
Además, también mostrará un conjunto de comentarios sobre el plato

35
00:02:52,009 --> 00:02:58,444
en la segunda parte de este componente aquí.

36
00:02:58,444 --> 00:03:04,270
Ahora, para empezar, en las instrucciones de asignación,

37
00:03:04,270 --> 00:03:09,710
te he suministrado un nuevo objeto JavaScript

38
00:03:09,710 --> 00:03:11,719
que contiene los detalles del plato,

39
00:03:11,719 --> 00:03:15,770
incluyendo los comentarios sobre ese plato.

40
00:03:15,770 --> 00:03:18,875
Vas a utilizar esa información con el fin de construir

41
00:03:18,875 --> 00:03:21,740
estos dos: el componente de la tarjeta para mostrar

42
00:03:21,740 --> 00:03:26,944
los detalles del plato, y la lista de comentarios aquí.

43
00:03:26,944 --> 00:03:32,699
Su segunda tarea es actualizar su archivo

44
00:03:32,699 --> 00:03:39,349
TypeScript para incluir la nueva variable de plato,

45
00:03:39,349 --> 00:03:45,379
y luego usar la variable de plato con el componente de tarjeta,

46
00:03:45,379 --> 00:03:52,710
y luego preparar el componente de tarjeta aquí para mostrar los detalles del plato.

47
00:03:52,710 --> 00:03:55,400
Una vez que complete la segunda tarea,

48
00:03:55,400 --> 00:03:59,330
en su aplicación verá que,

49
00:03:59,330 --> 00:04:04,699
justo debajo del menú, verá los detalles de la información del plato

50
00:04:04,699 --> 00:04:09,590
dado que se muestra en una tarjeta como esta aquí,

51
00:04:09,590 --> 00:04:13,520
para que pueda ver el título, la imagen,

52
00:04:13,520 --> 00:04:17,129
y también la descripción hecha a continuación.

53
00:04:17,129 --> 00:04:22,519
Ahora, después de completar esto, pasará a la tercera tarea.

54
00:04:22,519 --> 00:04:29,120
En la tercera tarea, usará los comentarios que también están encerrados dentro del plato

55
00:04:29,120 --> 00:04:35,239
que le hemos proporcionado en el objeto JavaScript,

56
00:04:35,239 --> 00:04:40,819
y luego usará eso para construir y mostrar una lista de comentarios aquí.

57
00:04:40,819 --> 00:04:43,235
Al final de la tercera tarea,

58
00:04:43,235 --> 00:04:48,595
esto es lo que verás que se muestra en el lado derecho de tu plato.

59
00:04:48,595 --> 00:04:52,235
Puede ver que tiene un encabezado aquí con

60
00:04:52,235 --> 00:04:54,019
la palabra «Comentarios»,

61
00:04:54,019 --> 00:04:58,149
y luego tiene una lista de comentarios que se muestran aquí.

62
00:04:58,149 --> 00:05:03,480
La información para construir estos comentarios está disponible dentro del objeto JavaScript de plato

63
00:05:03,480 --> 00:05:07,699
que hemos dado para usted.

64
00:05:07,699 --> 00:05:11,610
En particular, tenga en cuenta que este es el comentario real,

65
00:05:11,610 --> 00:05:15,505
este es el número de estrellas dadas a ese comentario,

66
00:05:15,505 --> 00:05:21,259
y aquí es donde mostramos el nombre del autor con dos guiones al frente,

67
00:05:21,259 --> 00:05:25,589
y nota, al final, mostramos la fecha aquí.

68
00:05:25,589 --> 00:05:28,774
Para poder construir esta fecha aquí,

69
00:05:28,774 --> 00:05:33,600
necesita usar una tubería angular llamada Fecha.

70
00:05:33,600 --> 00:05:37,610
Ya hemos visto el uso de una tubería incorporada llamada Mayúscula

71
00:05:37,610 --> 00:05:39,939
en el ejercicio anterior,

72
00:05:39,939 --> 00:05:45,379
por lo que simplemente usa la tubería Fecha para crear esta fecha

73
00:05:45,379 --> 00:05:50,660
que se mostrará a la derecha del nombre del autor aquí.

74
00:05:50,660 --> 00:05:53,839
Así que, esas son las pistas para que comiences con

75
00:05:53,839 --> 00:05:59,240
esta tercera tarea en tu primera tarea.

76
00:05:59,240 --> 00:06:02,849
Diviértete completando la primera tarea.

77
00:06:02,849 --> 00:06:04,620
Independientemente de los recursos que necesite,

78
00:06:04,620 --> 00:06:09,980
el archivo de plantilla preconfigurado

79
00:06:09,980 --> 00:06:14,115
y el objeto JavaScript del plato están disponibles

80
00:06:14,115 --> 00:06:18,649
en las instrucciones para esta asignación.