1 00:00:00,000 --> 00:00:07,225 Ahora que hemos examinado el enlace de datos, 2 00:00:07,225 --> 00:00:10,275 vamos a hacer uso de ellos para 3 00:00:10,275 --> 00:00:14,715 trabajando en la aplicación Angular que hemos estado utilizando hasta ahora. 4 00:00:14,715 --> 00:00:17,504 En la versión anterior de la aplicación Angular, 5 00:00:17,504 --> 00:00:20,190 teníamos el menú siendo renderizado, 6 00:00:20,190 --> 00:00:24,655 y luego teníamos un plato específico que se mostraba en la parte inferior. 7 00:00:24,655 --> 00:00:28,770 Ahora, idealmente nos gustaría que el usuario pudiera hacer clic 8 00:00:28,770 --> 00:00:32,990 en cualquiera de los elementos del menú y luego los detalles que se mostrarán al usuario. 9 00:00:32,990 --> 00:00:37,325 Aquí es donde el uso del enlace de datos nos ayudará 10 00:00:37,325 --> 00:00:43,430 a implementar nuestra aplicación para habilitar este tipo de característica. 11 00:00:43,430 --> 00:00:48,470 Pasando al estado actual de nuestra aplicación en el navegador, 12 00:00:48,470 --> 00:00:52,040 ahora podemos ver que tenemos nuestro menú y en la parte inferior tenemos 13 00:00:52,040 --> 00:00:56,370 los detalles de un plato específico que se muestra allí. 14 00:00:56,370 --> 00:01:01,625 Ahora bien, esto es bueno para empezar, pero idealmente, 15 00:01:01,625 --> 00:01:06,350 lo que nos gustaría tener es que si el usuario hace clic en cualquiera de estos platos, 16 00:01:06,350 --> 00:01:12,585 queremos ser capaces de mostrar los detalles del plato en la parte inferior del menú aquí. 17 00:01:12,585 --> 00:01:17,165 Por lo tanto, nos gustaría que los detalles del plato se cambiaran 18 00:01:17,165 --> 00:01:22,250 en función de qué plato específico hacemos clic en cualquier momento. 19 00:01:22,250 --> 00:01:24,100 Entonces, ¿cómo logramos esto? 20 00:01:24,100 --> 00:01:28,355 Entonces, aquí es donde el uso del enlace de datos viene a nuestro rescate. 21 00:01:28,355 --> 00:01:31,735 Ir a nuestra aplicación, 22 00:01:31,735 --> 00:01:35,750 lo primero que voy a hacer es en la carpeta compartida, 23 00:01:35,750 --> 00:01:39,800 ahora te das cuenta de que la información del plato se está usando 24 00:01:39,800 --> 00:01:45,090 tanto en el componente de menú como en el componente de detalle del plato. 25 00:01:45,090 --> 00:01:49,100 Ahora, cuando usted tiene información siendo compartida así, 26 00:01:49,100 --> 00:01:53,120 sería más conveniente tener un lugar centralizado 27 00:01:53,120 --> 00:01:57,170 desde el que esta información se suministra a ambos componentes. 28 00:01:57,170 --> 00:01:58,880 Así que para ayudarme a hacer eso, 29 00:01:58,880 --> 00:02:03,470 lo que voy a hacer es ir a la carpeta de recursos compartidos y luego crear un nuevo archivo, 30 00:02:03,470 --> 00:02:09,150 y luego nombraré este archivo como dishes.ts. 31 00:02:09,150 --> 00:02:11,540 Dentro de este archivo dishes.ts, 32 00:02:11,540 --> 00:02:16,840 voy a crear la constante que proporciona los detalles de los platos. 33 00:02:16,840 --> 00:02:17,980 Así que para hacer eso, 34 00:02:17,980 --> 00:02:27,380 primero importaría el plato, 35 00:02:27,380 --> 00:02:34,400 de la clase de plato 36 00:02:34,400 --> 00:02:36,760 que ya he definido anteriormente. 37 00:02:36,760 --> 00:02:40,625 Así que ahora, puedo definir una constante 38 00:02:40,625 --> 00:02:48,230 llamada como platos del tipo una matriz de platos, 39 00:02:48,230 --> 00:02:53,590 y entonces aquí es donde voy a almacenar los detalles de todos mis platos. 40 00:02:53,590 --> 00:02:56,495 Ahora, en la versión anterior de la aplicación, 41 00:02:56,495 --> 00:03:00,500 hemos visto el uso de los platos y vimos 42 00:03:00,500 --> 00:03:04,610 la matriz de objetos JavaScript que contiene los detalles de los platos. 43 00:03:04,610 --> 00:03:09,830 Ahora, vamos a mover todo ese contenido y con una versión actualizada del mismo. 44 00:03:09,830 --> 00:03:12,485 Entonces, una versión actualizada de los platos 45 00:03:12,485 --> 00:03:16,520 JavaScript object array se le da en las instrucciones, 46 00:03:16,520 --> 00:03:18,065 así que simplemente vaya y copie 47 00:03:18,065 --> 00:03:22,760 toda la matriz de objetos JavaScript desde allí y luego la pegaremos en su lugar aquí. 48 00:03:22,760 --> 00:03:25,625 Por lo tanto, esto se convierte en la ubicación central desde la que 49 00:03:25,625 --> 00:03:30,215 la información de los platos se suministra a su aplicación. 50 00:03:30,215 --> 00:03:34,610 Ahora he cortado y pegado los detalles de 51 00:03:34,610 --> 00:03:39,770 el plato que se dan en las instrucciones de ejercicio en su lugar aquí, 52 00:03:39,770 --> 00:03:43,640 y así tengo cuatro platos pegados aquí uno, 53 00:03:43,640 --> 00:03:46,030 dos tres, y cuatro platos pegados aquí, 54 00:03:46,030 --> 00:03:48,710 y cada uno de esos platos contiene, por supuesto 55 00:03:48,710 --> 00:03:52,560 los detalles del plato específico y también comentarios para el plato. 56 00:03:52,560 --> 00:03:55,610 Ahora bien, de esta manera, la presentación de la información en 57 00:03:55,610 --> 00:04:02,360 , la plantilla de detalle del plato se vuelve sencilla para cualquiera de estos platos elegidos. 58 00:04:02,360 --> 00:04:09,130 Ahora, si retroceden verá que hay algunas líneas rojas aquí. 59 00:04:09,130 --> 00:04:16,700 La razón de estas líneas rojas es porque cuando miras el objeto plato aquí, 60 00:04:16,700 --> 00:04:23,210 verás que en el objeto plato no tenemos una propiedad allí llamada como comentarios. 61 00:04:23,210 --> 00:04:26,060 Por lo tanto, necesitamos crear una nueva propiedad llamada 62 00:04:26,060 --> 00:04:30,480 comentarios para agregar a ese plato aquí. Entonces, ¿cómo lo hacemos? 63 00:04:30,480 --> 00:04:35,060 Así que para hacer eso, vamos a decir comentarios y 64 00:04:35,060 --> 00:04:41,275 entonces yo diría comentarios array aquí. 65 00:04:41,275 --> 00:04:47,690 Ahora inmediatamente te das cuenta de que no hay ninguna matriz de comentarios disponible para nosotros, 66 00:04:47,690 --> 00:04:50,495 , así que necesitamos crear esa matriz de comentarios. 67 00:04:50,495 --> 00:04:54,605 Entonces, lo que voy a hacer es crear otra clase de JavaScript 68 00:04:54,605 --> 00:04:59,090 que contiene los detalles del comentario allí. 69 00:04:59,090 --> 00:05:17,340 Así que para hacer eso, primero importaré el comentario de 70 00:05:17,340 --> 00:05:20,750 la clase de comentario aquí. 71 00:05:20,750 --> 00:05:25,435 Ahora, por supuesto, la línea roja inmediatamente me dice que no tengo una clase de comentario. 72 00:05:25,435 --> 00:05:27,375 Entonces, ¿cómo añadimos una clase de comentario? 73 00:05:27,375 --> 00:05:29,500 Así que yendo a la carpeta compartida, 74 00:05:29,500 --> 00:05:37,940 vamos a crear un nuevo archivo llamado comment.ts y dentro de este comment.ts, 75 00:05:37,940 --> 00:05:48,250 vamos a definir una clase llamada comment aquí. 76 00:05:50,300 --> 00:05:55,695 Ahora, necesitamos definir ciertas propiedades para esta clase de comentario. 77 00:05:55,695 --> 00:05:57,605 Entonces, ¿cuáles son las propiedades que tenemos? 78 00:05:57,605 --> 00:06:00,890 Echemos un vistazo rápido a nuestro archivo dishes.ts 79 00:06:00,890 --> 00:06:05,310 y luego veremos cuáles son las propiedades de cada comentario. 80 00:06:06,170 --> 00:06:09,085 Al ir al archivo dishes.ts, 81 00:06:09,085 --> 00:06:11,555 verá que los comentarios contienen 82 00:06:11,555 --> 00:06:15,470 una propiedad llamada como una calificación que parece ser un número, 83 00:06:15,470 --> 00:06:18,110 entonces usted tiene un comentario que es una cadena y 84 00:06:18,110 --> 00:06:21,490 autor que es una cadena y una fecha que también es una cadena. 85 00:06:21,490 --> 00:06:26,690 Entonces, necesitamos definir cuatro propiedades para mi clase de comentario aquí. 86 00:06:26,690 --> 00:06:30,075 Entonces, volviendo a la clase de comentarios, 87 00:06:30,075 --> 00:06:34,770 definiría la calificación como número. 88 00:06:34,770 --> 00:06:37,410 Entonces, en script de tipo, 89 00:06:37,410 --> 00:06:47,575 todo es un número aquí, entonces tuvimos un comentario que es un autor de cadena, 90 00:06:47,575 --> 00:06:49,480 que también es una cadena, 91 00:06:49,480 --> 00:06:56,500 y luego fecha que también es una cadena aquí. 92 00:06:56,500 --> 00:07:01,130 Entonces, estas son las cuatro propiedades que tenemos aquí. 93 00:07:01,130 --> 00:07:09,620 Ahora, obviamente hemos visto cómo usamos la cadena de fecha en el ejercicio anterior, 94 00:07:09,620 --> 00:07:13,040 y en la asignación cómo hicimos uso de 95 00:07:13,040 --> 00:07:17,410 la cadena de fecha para mostrar la fecha para el comentario allí. 96 00:07:17,410 --> 00:07:19,755 Ahora, en caso de que se esté preguntando, 97 00:07:19,755 --> 00:07:22,540 ¿qué contiene realmente esta cadena de fecha? 98 00:07:22,540 --> 00:07:28,260 Al ir aquí, verá que esta cadena de fecha tiene un cierto formato. 99 00:07:28,260 --> 00:07:32,165 Por lo tanto, este es el formato estándar para almacenar una fecha aquí. 100 00:07:32,165 --> 00:07:38,230 Este formato de fecha es la forma ISO OSI de especificar el formato de fecha. 101 00:07:38,230 --> 00:07:39,775 Entonces, vamos a usar esto, 102 00:07:39,775 --> 00:07:42,670 así que este es un formato estandarizado que se utiliza también en 103 00:07:42,670 --> 00:07:48,430 muchos lenguajes de programación que le permite almacenar los datos como una cadena aquí, 104 00:07:48,430 --> 00:07:51,500 así que voy a hacer uso de él como tal aquí. 105 00:07:51,500 --> 00:07:55,405 Después de hacer los cambios en el archivo 106 00:07:55,405 --> 00:08:02,230 dish.ts como este aquí y luego también agregar en la clase de comentario aquí, 107 00:08:02,230 --> 00:08:08,420 ahora vemos que el archivo dishes.ts ya no tiene esas líneas rojas porque 108 00:08:08,420 --> 00:08:18,325 el comentario se ha agregado como una matriz de objetos a mi clase dish aquí. 109 00:08:18,325 --> 00:08:22,470 Por lo tanto, esto funciona bien hasta ahora. 110 00:08:22,470 --> 00:08:24,530 Ahora, ¿cómo hacemos uso de esto? 111 00:08:24,530 --> 00:08:25,935 Ahora para hacer uso de esto, 112 00:08:25,935 --> 00:08:28,755 vamos a ir al menú component.ts, 113 00:08:28,755 --> 00:08:32,050 y luego aquí tenemos esta constante definida aquí. 114 00:08:32,050 --> 00:08:34,760 Ahora, esta no es la forma correcta de hacerlo 115 00:08:34,760 --> 00:08:38,845 más adelante me verán usando un servicio para todo esto. 116 00:08:38,845 --> 00:08:49,075 Así que, permítanme cortar esta constante de aquí completamente y en lugar de usar esa constante, 117 00:08:49,075 --> 00:08:54,880 voy a importar ahora platos 118 00:08:54,880 --> 00:09:01,600 de la carpeta compartida 119 00:09:01,600 --> 00:09:07,225 aquí, platos compartidos aquí. 120 00:09:07,225 --> 00:09:12,875 Por lo tanto, observe que esta carpeta de platos está exportando la constante de platos aquí. 121 00:09:12,875 --> 00:09:17,250 Entonces, esa es la razón por la que somos capaces de hacer uso de ella. 122 00:09:17,250 --> 00:09:20,080 Así que volviendo a los platos uno aquí, 123 00:09:20,080 --> 00:09:22,600 necesito exportar esto desde aquí, 124 00:09:22,600 --> 00:09:25,500 así que diría exportar. 125 00:09:25,500 --> 00:09:28,285 Constante. Entonces, cuando hago eso, 126 00:09:28,285 --> 00:09:33,985 entonces en mi componente de menú puedo ver que mis platos se pueden importar aquí correctamente. 127 00:09:33,985 --> 00:09:40,150 Entonces, el resto del código aquí funcionará bien sin ningún cambio. 128 00:09:40,500 --> 00:09:46,190 Verá que si guarda los valores ahora 129 00:09:46,190 --> 00:09:51,190 y luego mira su aplicación web en el navegador, 130 00:09:51,190 --> 00:09:55,655 se renderizará bien incluso después de estos cambios. 131 00:09:55,655 --> 00:10:00,110 Después de guardar todos los cambios que has hecho hasta ahora en todos los archivos, 132 00:10:00,110 --> 00:10:01,810 si vas y miras tu página web, 133 00:10:01,810 --> 00:10:05,360 tu página web se renderiza como antes. 134 00:10:05,360 --> 00:10:09,025 Ahora, la segunda parte del problema. 135 00:10:09,025 --> 00:10:11,390 Queremos poder comunicarnos. 136 00:10:11,390 --> 00:10:15,640 Cuando hacemos clic en cualquiera de estos elementos del menú, 137 00:10:15,640 --> 00:10:18,415 queremos poder comunicar esa información para que 138 00:10:18,415 --> 00:10:21,640 el plato correspondiente se represente aquí. 139 00:10:21,640 --> 00:10:23,620 Así que, aquí es donde vamos a tomar la ayuda de 140 00:10:23,620 --> 00:10:27,100 el enlace de datos que hemos aprendido hasta ahora. 141 00:10:27,100 --> 00:10:33,505 Volviendo al archivo de plantilla de componentes de menú, 142 00:10:33,505 --> 00:10:36,600 lo que vamos a hacer es que para 143 00:10:36,600 --> 00:10:41,675 este «app-dishdetail» que incluimos en la parte inferior aquí, 144 00:10:41,675 --> 00:10:48,570 para agregar en la plantilla de componentes de detalle de plato a la plantilla de componentes de menú, 145 00:10:48,570 --> 00:10:53,440 vamos a añadir en una propiedad llamada como Dish. 146 00:10:53,440 --> 00:10:59,520 Entonces, asignaremos esto a ser «SelectedDish». 147 00:10:59,520 --> 00:11:03,550 Recordará que el plato seleccionado es una variable que tenemos 148 00:11:03,550 --> 00:11:08,385 definido en nuestro menú componentes archivo TypeScript aquí. 149 00:11:08,385 --> 00:11:12,020 Así que, de esa manera; ese valor de ese plato seleccionado será 150 00:11:12,020 --> 00:11:15,905 pasado a través de este plato propiedad aquí. 151 00:11:15,905 --> 00:11:20,860 Ahora, vamos a ver cómo el componente de detalle del plato puede recuperar esta información 152 00:11:20,860 --> 00:11:25,670 y luego hacer uso de ella bien en el siguiente paso del ejercicio. 153 00:11:25,670 --> 00:11:27,655 Ahora, mientras estamos aquí, 154 00:11:27,655 --> 00:11:33,345 también solucionaremos el otro problema con el que tenemos que lidiar. 155 00:11:33,345 --> 00:11:40,155 Es decir, cuando se hace clic en cualquiera de los elementos del menú, 156 00:11:40,155 --> 00:11:44,215 entonces generará un evento de clic y queremos que esa información sea 157 00:11:44,215 --> 00:11:49,475 entregada a nuestro archivo de componente de menú TypeScript. 158 00:11:49,475 --> 00:11:56,960 Entonces, para hacer eso, entraremos en las listas de cuadrícula de menú que hemos definido aquí. 159 00:11:56,960 --> 00:11:59,395 Para este mosaico de cuadrícula aquí, 160 00:11:59,395 --> 00:12:04,945 lo que voy a hacer es definir el evento de clic aquí. 161 00:12:04,945 --> 00:12:06,910 Entonces, para el evento click, 162 00:12:06,910 --> 00:12:11,870 lo que voy a hacer es llamar al método 163 00:12:11,870 --> 00:12:19,005 select que definiré dentro de mi archivo component.ts de menú. 164 00:12:19,005 --> 00:12:20,880 Para este método onSelect, 165 00:12:20,880 --> 00:12:25,975 voy a suministrar el plato como el parámetro aquí. 166 00:12:25,975 --> 00:12:27,315 ¿Qué es este plato? 167 00:12:27,315 --> 00:12:30,670 Este plato es exactamente este plato que has seleccionado en 168 00:12:30,670 --> 00:12:35,785 este «plato de platos» en la sintaxis ngFor aquí. 169 00:12:35,785 --> 00:12:38,290 Entonces, ese plato específico, 170 00:12:38,290 --> 00:12:41,390 fuera de la matriz de platos que ha seleccionado aquí, 171 00:12:41,390 --> 00:12:45,980 se pasará como parámetro a este método onSelect, 172 00:12:45,980 --> 00:12:50,555 lo que vamos a implementar en nuestro archivo component.ts de menú. 173 00:12:50,555 --> 00:12:52,465 Así que, ahora que hemos hecho esto, 174 00:12:52,465 --> 00:12:56,175 así que este es el controlador que necesita ser implementado. 175 00:12:56,175 --> 00:12:59,960 Vamos al archivo de componente de menú y luego arregle 176 00:12:59,960 --> 00:13:04,195 este archivo para implementar este controlador allí. 177 00:13:04,195 --> 00:13:08,490 Por lo tanto, cuando haga un clic en cualquiera de los elementos del menú, 178 00:13:08,490 --> 00:13:10,695 entonces se llamará al identificador correspondiente y 179 00:13:10,695 --> 00:13:15,605 la información específica del plato se pasará como un parámetro aquí. 180 00:13:15,605 --> 00:13:19,790 Al ir al archivo component.ts de menú, ahora, 181 00:13:19,790 --> 00:13:25,545 al plato seleccionado se le asignará un valor basado en qué plato selecciono. 182 00:13:25,545 --> 00:13:29,600 Entonces, voy a eliminar esa parte y luego justo debajo aquí, 183 00:13:29,600 --> 00:13:34,660 voy a implementar el método onSelect aquí. 184 00:13:34,660 --> 00:13:37,715 Entonces, para el método onSelect, 185 00:13:37,715 --> 00:13:45,525 esto obtendrá un parámetro que es el parámetro dish. 186 00:13:45,525 --> 00:13:47,820 Cuando llegue ese parámetro dish, 187 00:13:47,820 --> 00:13:55,705 voy a asignar este SelectedDish igual a dish, 188 00:13:55,705 --> 00:14:02,420 el parámetro que entró como el valor para el método onSelect aquí. 189 00:14:02,420 --> 00:14:03,895 Así que, esto es todo. 190 00:14:03,895 --> 00:14:08,410 Entonces, cuando haga clic en cualquiera de esos elementos en el menú, 191 00:14:08,410 --> 00:14:10,780 cualquiera de los platos en el menú, 192 00:14:10,780 --> 00:14:15,090 esa información del plato será pasada a través de esto y luego 193 00:14:15,090 --> 00:14:20,670 el plato seleccionado será asignado a ese objeto plato aquí. 194 00:14:20,670 --> 00:14:25,415 Ahora, tenemos cómo llega la información del DOM. 195 00:14:25,415 --> 00:14:29,280 El clic específico hará que la información del plato a 196 00:14:29,280 --> 00:14:33,875 esté disponible para nosotros y al plato seleccionado se le asignará ese valor. 197 00:14:33,875 --> 00:14:38,755 Ahora, volviendo al archivo HTML del componente de menú, 198 00:14:38,755 --> 00:14:45,240 vemos que ya hemos asignado esta propiedad de plato a SelectedDish. 199 00:14:45,240 --> 00:14:48,730 Entonces, de esa manera, ese valor del plato seleccionado se está pasando 200 00:14:48,730 --> 00:14:53,980 a través de esta propiedad del plato a esta aplicación dishdetail aquí. 201 00:14:53,980 --> 00:14:57,990 Ahora, ¿cómo mi componente de detalle de plato obtiene esta información? 202 00:14:57,990 --> 00:15:02,225 Para eso, vamos a ir al componente de detalle del plato y arreglarlo. 203 00:15:02,225 --> 00:15:05,185 Al ir al componente de detalle del plato, 204 00:15:05,185 --> 00:15:08,395 lo primero que voy a hacer es eliminar 205 00:15:08,395 --> 00:15:13,370 esta constante del plato de mi componente de detalle del plato. 206 00:15:13,370 --> 00:15:14,985 Ya no lo necesito. 207 00:15:14,985 --> 00:15:18,490 Ahora, cuando una propiedad está siendo enlazada, 208 00:15:18,490 --> 00:15:22,715 como lo que hemos visto en el archivo HTML del componente de menú, 209 00:15:22,715 --> 00:15:25,900 luego en mi archivo de detalle plato, 210 00:15:25,900 --> 00:15:32,035 puedo usar otro módulo llamado como el Módulo de entrada. 211 00:15:32,035 --> 00:15:35,505 Entonces, para este plato, 212 00:15:35,505 --> 00:15:39,555 simplemente voy a declarar eso como DISH. 213 00:15:39,555 --> 00:15:45,095 Ahora, este módulo de entrada me permite declarar un decorador 214 00:15:45,095 --> 00:15:50,905 para esta variable de plato que definí aquí, 215 00:15:50,905 --> 00:15:57,800 así, en la entrada con el paréntesis aquí a ese plato aquí. 216 00:15:57,800 --> 00:16:01,025 Entonces, también, necesito importar 217 00:16:01,025 --> 00:16:10,010 la clase de plato 218 00:16:10,010 --> 00:16:18,975 del plato compartido aquí. 219 00:16:18,975 --> 00:16:24,610 Entonces, con esto, entonces lo que ha sucedido es que estoy haciendo uso del módulo de entrada. 220 00:16:24,610 --> 00:16:30,655 Por lo tanto, esta es una forma de proporcionar información a un componente desde otro componente. 221 00:16:30,655 --> 00:16:33,650 Enlaza una propiedad en la plantilla de 222 00:16:33,650 --> 00:16:37,460 el otro componente como vimos en el archivo component.html de menú, 223 00:16:37,460 --> 00:16:41,550 y luego estará disponible como entrada a este componente mediante 224 00:16:41,550 --> 00:16:47,070 declarando una variable y luego llamando al decorador de entrada para eso. 225 00:16:47,070 --> 00:16:51,400 Ahora, con esto, vamos a guardar los cambios en todos los archivos que hemos hecho 226 00:16:51,400 --> 00:16:56,990 y luego echar un vistazo a la replicación angular. 227 00:16:56,990 --> 00:17:00,140 Al ir a nuestro navegador, 228 00:17:00,140 --> 00:17:02,260 vemos que en esta replicación angular, 229 00:17:02,260 --> 00:17:04,000 nada se muestra aquí. 230 00:17:04,000 --> 00:17:07,470 Porque en este momento, el plato seleccionado, 231 00:17:07,470 --> 00:17:11,120 no hemos seleccionado ninguno de los platos por lo que también el plato seleccionado 232 00:17:11,120 --> 00:17:14,985 es un objeto vacío allí. 233 00:17:14,985 --> 00:17:23,050 Por lo tanto, usamos el nGIF en la plantilla para el detalle del plato. 234 00:17:23,050 --> 00:17:27,765 Así que, echando un vistazo rápido a la plantilla de detalles del plato, 235 00:17:27,765 --> 00:17:31,810 has implementado esto como parte de tu tarea. 236 00:17:31,810 --> 00:17:38,315 Entonces, deberías haber usado el nGIF con el plato tanto para el código, 237 00:17:38,315 --> 00:17:41,400 como para la lista MD allí. 238 00:17:41,400 --> 00:17:44,125 Entonces, si haces eso, 239 00:17:44,125 --> 00:17:47,705 entonces cuando el plato está actualmente sin seleccionar, 240 00:17:47,705 --> 00:17:50,175 entonces nada se mostrará en la parte inferior. 241 00:17:50,175 --> 00:17:53,255 Pero en el momento en que haga clic en cualquiera de los platos, 242 00:17:53,255 --> 00:17:58,005 entonces inmediatamente ve los detalles del plato que se muestra en la parte inferior aquí. 243 00:17:58,005 --> 00:18:00,840 Ahora puedo seleccionar el segundo plato y luego inmediatamente, 244 00:18:00,840 --> 00:18:06,000 notarás que los detalles del plato que se muestran a continuación se cambian. 245 00:18:06,000 --> 00:18:09,090 Así que, cada vez que haga clic en cualquiera de estos platos, 246 00:18:09,090 --> 00:18:11,505 los detalles de ese plato específico, 247 00:18:11,505 --> 00:18:15,670 incluyendo los comentarios se mostrarán en la parte inferior aquí. 248 00:18:15,670 --> 00:18:20,710 Por lo tanto, esto es exactamente lo que queremos lograr en este ejercicio particular. 249 00:18:20,710 --> 00:18:27,855 Así que, aquí, usted ha visto el uso de enlace de datos, tres tipos diferentes, 250 00:18:27,855 --> 00:18:31,970 incluyendo el controlador de eventos y eventos, 251 00:18:31,970 --> 00:18:37,110 y también vio cómo podemos hacer uso del módulo de entrada para poder 252 00:18:37,110 --> 00:18:42,855 para recuperar información en un componente procedente de otro componente. 253 00:18:42,855 --> 00:18:45,820 Con esto, completamos este ejercicio, 254 00:18:45,820 --> 00:18:48,750 donde hemos aprendido a hacer uso de varias funciones de enlace 255 00:18:48,750 --> 00:18:56,005 de datos disponibles en Angular para implementar nuestra aplicación. 256 00:18:56,005 --> 00:19:02,010 Este es un buen momento para que realice una confirmación de git con el enlace de datos del mensaje.