1
00:00:03,650 --> 00:00:11,280
Es hora de continuar con nuestro próximo ejercicio en el que examinaremos los componentes una vez más.

2
00:00:11,280 --> 00:00:15,600
Modificaremos la plantilla para

3
00:00:15,600 --> 00:00:20,670
el componente de menú que ya hemos incluido en nuestra aplicación Angular

4
00:00:20,670 --> 00:00:30,580
mediante el uso de un nuevo tipo de componente de material para diseñar nuestro menú de una manera diferente.

5
00:00:30,580 --> 00:00:36,625
En el camino, también veremos el uso de la directiva estructural nGiF.

6
00:00:36,625 --> 00:00:40,790
Al ir al archivo de plantilla de nuestro componente de menú,

7
00:00:40,790 --> 00:00:44,685
voy a hacer algunos cambios en este archivo de plantilla.

8
00:00:44,685 --> 00:00:47,900
Primero, voy a agregar otro div aquí

9
00:00:47,900 --> 00:00:56,170
con FXFlex y luego cerrar ese div allí.

10
00:00:56,170 --> 00:01:01,245
Entonces, observe que ahora dentro de mi div externo,

11
00:01:01,245 --> 00:01:03,050
tengo dos divs aquí.

12
00:01:03,050 --> 00:01:07,855
Entonces, uno con el div y el segundo con la lista vacía.

13
00:01:07,855 --> 00:01:15,880
Por lo tanto, estas son dos piezas de contenido que deben colocarse en la pantalla.

14
00:01:15,880 --> 00:01:19,450
Pero tenga en cuenta que he especificado el FXLayout para coloreado.

15
00:01:19,450 --> 00:01:21,590
Entonces, lo que significa que, estas dos piezas de contenido

16
00:01:21,590 --> 00:01:24,445
se colocarán una encima de la otra,

17
00:01:24,445 --> 00:01:27,025
apiladas una encima de la otra.

18
00:01:27,025 --> 00:01:29,370
Entonces, en el primer div,

19
00:01:29,370 --> 00:01:32,330
voy a incluir un poco de contenido aquí.

20
00:01:32,330 --> 00:01:38,570
Entonces, pondré otro div dentro aquí.

21
00:01:38,570 --> 00:01:42,005
Más tarde, agregaré más a este div.

22
00:01:42,005 --> 00:01:50,625
Pero por el momento, solo tendré un h3 con el elemento de menú allí,

23
00:01:50,625 --> 00:01:56,875
y luego agregaré un elemento de línea horizontal a este menú.

24
00:01:56,875 --> 00:02:02,780
Entonces, esto le dará el título de

25
00:02:02,780 --> 00:02:08,900
esta página en particular justo en la parte superior de mi aplicación cuando se renderiza.

26
00:02:08,900 --> 00:02:12,395
Entonces, esa es una modificación.

27
00:02:12,395 --> 00:02:14,070
Ahora, para la segunda parte,

28
00:02:14,070 --> 00:02:16,435
en lugar de usar el mat-list-item,

29
00:02:16,435 --> 00:02:21,830
Voy a tomar ahora la ayuda de una mat-grid-list.

30
00:02:21,830 --> 00:02:26,000
Mat-Grid-list me permite diseñar el contenido como

31
00:02:26,000 --> 00:02:30,625
una cuadrícula de elementos en lugar de una lista de elementos.

32
00:02:30,625 --> 00:02:38,220
Vimos cómo se presentó el menú con la lista de elementos en el ejercicio anterior.

33
00:02:38,220 --> 00:02:41,810
Ahora, me gustaría diseñar el mismo menú de una manera diferente un

34
00:02:41,810 --> 00:02:45,615
un poco más atractivo para el menú.

35
00:02:45,615 --> 00:02:48,140
Entonces, en lugar de usar la lista de matas,

36
00:02:48,140 --> 00:02:52,520
voy a cambiar esto de lista de mat-list a una lista de mat-grid-list.

37
00:02:52,520 --> 00:02:54,005
Entonces, antes de hacer eso,

38
00:02:54,005 --> 00:03:03,645
también incluiré esto dentro de otro div al que aplicaré el FXFlex aquí,

39
00:03:03,645 --> 00:03:10,320
para que la lista de rejilla mate esté en su propia allí.

40
00:03:10,320 --> 00:03:14,540
Entonces, eso me dará más flexibilidad para agregar elementos

41
00:03:14,540 --> 00:03:19,180
a esta unidad en particular si necesito más adelante.

42
00:03:19,180 --> 00:03:23,505
La lista de cuadrículas ahora toma un parámetro llamado como columnas

43
00:03:23,505 --> 00:03:28,450
que especifica cuántas columnas debe contener esta cuadrícula.

44
00:03:28,450 --> 00:03:35,540
Ahora mismo especificaré las columnas como dos porque solo tengo cuatro elementos en mi menú.

45
00:03:35,540 --> 00:03:37,290
Entonces, dos columnas son suficientes.

46
00:03:37,290 --> 00:03:41,995
Entonces, al menos tengo dos filas de la cuadrícula allí.

47
00:03:41,995 --> 00:03:45,770
Además, esto toma otro parámetro llamado

48
00:03:45,770 --> 00:03:50,010
como RowHeight o un atributo llamado como RowHeight,

49
00:03:50,010 --> 00:03:56,650
que especificaré como 200 píxeles aquí.

50
00:03:56,680 --> 00:04:03,630
Entonces, eso completaría la lista de rejilla de mat-que tengo dentro del div allí.

51
00:04:03,630 --> 00:04:09,120
Ahora, una vez que haga el cambio, luego dentro de esto,

52
00:04:09,120 --> 00:04:12,700
entraré y usaré,

53
00:04:12,700 --> 00:04:15,045
en lugar del mat-list-item,

54
00:04:15,045 --> 00:04:20,450
esto ahora va a ser un mat-grid-tile aquí.

55
00:04:20,450 --> 00:04:22,480
Entonces, el mosaico de cuadrícula.

56
00:04:22,480 --> 00:04:24,580
Básicamente, azulejos de la cuadrícula.

57
00:04:24,580 --> 00:04:27,350
Este azulejo de rejilla, como te das cuenta,

58
00:04:27,350 --> 00:04:31,200
voy a estar iterando sobre la lista de platos.

59
00:04:31,200 --> 00:04:35,090
Entonces, todavía estoy usando mi directiva ngFor con ella.

60
00:04:35,090 --> 00:04:38,510
Este azulejo de rejilla mate-rejilla ahora encierra

61
00:04:38,510 --> 00:04:43,095
el contenido que se va a colocar en cada ficha de mi cuadrícula aquí.

62
00:04:43,095 --> 00:04:45,320
Ahora, dentro de la ficha,

63
00:04:45,320 --> 00:04:49,105
voy a usar la imagen tal como existe.

64
00:04:49,105 --> 00:04:53,990
Pero voy a usar la imagen,

65
00:04:53,990 --> 00:04:58,750
no con MatListAvatar porque eso no se puede aplicar aquí, y en su lugar,

66
00:04:58,750 --> 00:05:04,720
especificaré la altura de la imagen como 200 píxeles.

67
00:05:04,720 --> 00:05:09,230
Entonces, esto coincide con la altura de la fila para que mi imagen estire

68
00:05:09,230 --> 00:05:14,325
toda la altura de mi mosaico allí.

69
00:05:14,325 --> 00:05:16,830
Por lo tanto, la altura de la imagen, 200 píxeles,

70
00:05:16,830 --> 00:05:20,190
y la fuente y la alt permanecerán como tal.

71
00:05:20,190 --> 00:05:22,745
Entonces, la siguiente parte,

72
00:05:22,745 --> 00:05:24,830
en lugar de la h1,

73
00:05:24,830 --> 00:05:27,110
voy a cambiar este

74
00:05:27,110 --> 00:05:33,880
para ser

75
00:05:33,880 --> 00:05:39,710
encerrado dentro de mat-grid-teille-pie de página.

76
00:05:41,780 --> 00:05:49,770
Por lo tanto, cualquier contenido que esté dentro de aquí aparecerá dentro del pie de piso de azulejos de la rejilla de la estera aquí.

77
00:05:49,770 --> 00:05:54,035
Ahora, dentro de allí puedo especificar el contenido que quiera.

78
00:05:54,035 --> 00:05:57,295
Entonces, para el mosaico de cuadrícula,

79
00:05:57,295 --> 00:06:00,170
dada la descripción completa es un poco demasiado.

80
00:06:00,170 --> 00:06:02,245
Entonces, voy a eliminar esta descripción,

81
00:06:02,245 --> 00:06:05,765
y en su lugar, solo usar el h1 allí.

82
00:06:05,765 --> 00:06:12,355
Ahora, además, voy a tomar la ayuda de una tubería angular aquí.

83
00:06:12,355 --> 00:06:16,340
La tubería que voy a aplicar a esto, como pueden ver,

84
00:06:16,340 --> 00:06:22,095
la tubería es la barra vertical en su teclado.

85
00:06:22,095 --> 00:06:25,440
Entonces, usaré la tubería en mayúsculas.

86
00:06:25,440 --> 00:06:27,175
Entonces, ¿qué hace esta tubería?

87
00:06:27,175 --> 00:06:32,795
Este tubo, el tubo en mayúsculas transformará el nombre del plato de

88
00:06:32,795 --> 00:06:39,015
lo que sea en una palabra completa con letras mayúsculas.

89
00:06:39,015 --> 00:06:42,215
Entonces, cualquiera que sea el nombre del plato se representaría como

90
00:06:42,215 --> 00:06:49,280
letras completamente mayúsculas cuando se representa en la plantilla allí.

91
00:06:49,280 --> 00:06:52,800
Entonces, ese es el uso de una tubería angular aquí.

92
00:06:52,800 --> 00:06:56,870
Por lo tanto, vamos a utilizar más tubos angulares a medida que avanzamos.

93
00:06:56,870 --> 00:07:05,205
Este es nuestro primer encuentro con uno de los tubos angulares incorporados en este curso.

94
00:07:05,205 --> 00:07:10,400
Entonces, con esto, ahora hemos modificado nuestro diseño

95
00:07:10,400 --> 00:07:15,670
para mostrar este div aquí y luego esta lista de cuadrícula aquí.

96
00:07:15,670 --> 00:07:17,240
Guardemos los cambios.

97
00:07:17,240 --> 00:07:21,070
Pasando ahora al archivo app.module.ts,

98
00:07:21,070 --> 00:07:24,640
necesitamos importar el MatGridListModule allí.

99
00:07:24,640 --> 00:07:27,660
Así que, yendo a la parte superior allí, diremos,

100
00:07:27,660 --> 00:07:36,490
«Importar MatGridListModule desde angular/material/grid/list.»

101
00:07:39,260 --> 00:07:42,055
Una vez que hayamos agregado esto,

102
00:07:42,055 --> 00:07:45,925
entonces bajaremos a las importaciones en el decorador,

103
00:07:45,925 --> 00:07:53,210
y luego incluiremos el MatGridListModule en las entradas.

104
00:07:53,210 --> 00:07:55,830
Vamos, de nuevo, a guardar los cambios.

105
00:07:55,830 --> 00:08:01,650
Vamos a echar un vistazo rápido a nuestra página web y cómo se ve en la pantalla.

106
00:08:01,650 --> 00:08:03,730
Al ir a nuestra página web,

107
00:08:03,730 --> 00:08:09,125
ya puedes ver que tu menú está ahora dispuesto de una manera diferente.

108
00:08:09,125 --> 00:08:13,590
Aunque, no es realmente tan grande mirando en este momento.

109
00:08:13,590 --> 00:08:15,230
No soy diseñador,

110
00:08:15,230 --> 00:08:18,880
así que eso es lo mejor que pude obtener de él.

111
00:08:18,880 --> 00:08:22,330
Ahora, si tuviera 20 elementos en mi menú,

112
00:08:22,330 --> 00:08:27,110
entonces podría diseñar varios elementos en cada fila y varias columnas,

113
00:08:27,110 --> 00:08:31,860
y luego podría comprimir el espacio que ocupa cada elemento,

114
00:08:31,860 --> 00:08:35,660
o puedo aumentar el tamaño de la imagen para que

115
00:08:35,660 --> 00:08:40,245
ocupe todo hasta que se vea mucho más atractivo en la pantalla.

116
00:08:40,245 --> 00:08:49,185
Ahora, echemos un vistazo a esta misma cosa cuando se ve en una pantalla de dispositivos más pequeños.

117
00:08:49,185 --> 00:08:52,400
Por lo tanto, aquí es donde voy a tomar la ayuda de

118
00:08:52,400 --> 00:08:57,990
las opciones de desarrollador en mi navegador Chrome.

119
00:08:57,990 --> 00:09:01,175
Por lo tanto, comenzaré con las herramientas de desarrollo aquí.

120
00:09:01,175 --> 00:09:04,330
Cuando tengo las herramientas de desarrollo aquí,

121
00:09:04,330 --> 00:09:08,340
puedes ver este botón aquí diciendo, «Alternar barra de herramientas del dispositivo».

122
00:09:08,340 --> 00:09:10,070
Entonces, déjame alternar hacia atrás.

123
00:09:10,070 --> 00:09:16,180
Entonces puede ver la misma página siendo renderizada en diferentes tamaños de pantalla.

124
00:09:16,180 --> 00:09:23,210
Así que aquí, se ve la página siendo renderizada en un Galaxy S5,

125
00:09:23,210 --> 00:09:27,030
y luego lo mismo

126
00:09:28,090 --> 00:09:34,435
se puede ver siendo renderizado en modo horizontal.

127
00:09:34,435 --> 00:09:39,110
Entonces, puedes ver que esto me permite ver la misma página

128
00:09:39,110 --> 00:09:44,490
en diferentes tamaños de pantalla usando las herramientas de desarrollador integradas en Android.

129
00:09:44,490 --> 00:09:48,755
Por lo tanto, echemos un vistazo a cómo se ve en un iPhone.

130
00:09:48,755 --> 00:09:51,815
El menú se ve mucho más atractivo aquí.

131
00:09:51,815 --> 00:09:55,220
Esto es lo que me gustaría lograr en la pantalla.

132
00:09:55,220 --> 00:10:02,155
Si mis imágenes fueran mucho más grandes en tamaño incluso en las pantallas de mayor resolución,

133
00:10:02,155 --> 00:10:06,045
el menú se vería así.

134
00:10:06,045 --> 00:10:11,205
En modo paisaje, así es como se verá.

135
00:10:11,205 --> 00:10:15,045
Ahora, toma nota de estas herramientas para desarrolladores en Chrome.

136
00:10:15,045 --> 00:10:21,790
Vamos a usar las herramientas de desarrollador más adelante cuando utilicemos Angular en

137
00:10:21,790 --> 00:10:25,340
más detalle porque podemos examinar cosas como lo que Angular

138
00:10:25,340 --> 00:10:30,180
puede imprimir para nosotros en la consola.

139
00:10:30,180 --> 00:10:36,650
Entonces incluso podemos examinar cómo se están recuperando las diferentes partes de nuestra aplicación.

140
00:10:36,650 --> 00:10:40,440
Podemos ver el rendimiento de la red de nuestra aplicación, y así sucesivamente.

141
00:10:40,440 --> 00:10:45,110
Entonces, ahí es donde esta adición de herramientas de desarrollador es muy,

142
00:10:45,110 --> 00:10:47,270
muy útil para nosotros.

143
00:10:47,270 --> 00:10:51,100
Volviendo a la forma normal,

144
00:10:51,100 --> 00:10:56,790
así es como se ve nuestra página web en un navegador de escritorio estándar.

145
00:10:56,790 --> 00:10:58,545
Aún no hemos terminado.

146
00:10:58,545 --> 00:11:02,955
Volvamos a los componentes del menú.

147
00:11:02,955 --> 00:11:07,200
Archivo mecanografiado y luego este plato que tengo

148
00:11:07,200 --> 00:11:11,765
definido aquí en lugar de mantener esto dentro de mi clase,

149
00:11:11,765 --> 00:11:18,060
voy a mover estos platos en una constante que

150
00:11:18,060 --> 00:11:25,670
definiré allí y lo nombraremos como platos const,

151
00:11:25,860 --> 00:11:31,370
y esto sería del tipo plato una matriz,

152
00:11:31,370 --> 00:11:38,825
y luego yo cortará todo este juego de platos desde aquí y luego lo moverá allí.

153
00:11:38,825 --> 00:11:43,450
Esto está en preparación para un ejercicio futuro en el que vamos

154
00:11:43,450 --> 00:11:50,050
para no incluir este tipo de datos en nuestra aplicación,

155
00:11:50,050 --> 00:11:59,950
sino que en su lugar vamos a trasladar esto a un servicio.

156
00:11:59,950 --> 00:12:05,260
Así que, lo que he hecho es cortar la información de los platos y

157
00:12:05,260 --> 00:12:11,405
luego ponerlo en una constante aquí con el nombre de los platos en todas las capitales aquí,

158
00:12:11,405 --> 00:12:16,100
y luego ahora mis platos se dejan como un huérfano aquí.

159
00:12:16,100 --> 00:12:26,275
Así que, esto voy a hacer que sea igual a los platos aquí.

160
00:12:26,275 --> 00:12:31,165
Ahora, tienes que preguntarte cómo es que he quitado el tipo para los platos.

161
00:12:31,165 --> 00:12:35,125
TypeScript es lo suficientemente inteligente como para darse cuenta de que cuando haces esto,

162
00:12:35,125 --> 00:12:40,360
asignará automáticamente el tipo a los platos para que coincidan con lo que tienes en los platos.

163
00:12:40,360 --> 00:12:44,195
Entonces, incluso si no lo escribe en TypeScript lo hará,

164
00:12:44,195 --> 00:12:47,350
pero si desea ser completamente claro,

165
00:12:47,350 --> 00:12:50,925
puede hacer esto también y eso funcionará igual de bien.

166
00:12:50,925 --> 00:12:53,920
Vale, si lo prefieres, esto lo dejará como tal.

167
00:12:53,920 --> 00:13:01,795
Ahora, además, voy a introducir una variable más aquí llamada SelectedDish.

168
00:13:01,795 --> 00:13:08,665
Esta variable voy a usar en este ejercicio y uno de los ejercicios posteriores también.

169
00:13:08,665 --> 00:13:17,875
Entonces, voy a hacer que esto sea igual al primer plato en mi matriz.

170
00:13:17,875 --> 00:13:24,730
Ahora, este SelectedDish será útil para la siguiente parte de este ejercicio.

171
00:13:24,730 --> 00:13:29,265
Por lo tanto, guardemos los cambios y luego volvamos a nuestra plantilla.

172
00:13:29,265 --> 00:13:33,460
En la plantilla, lo que voy a hacer es justo debajo del menú,

173
00:13:33,460 --> 00:13:39,825
voy a usar un elemento de tarjeta de material angular a

174
00:13:39,825 --> 00:13:46,555
mostrar este SelectedDish justo debajo del menú allí.

175
00:13:46,555 --> 00:13:50,700
Ahora, aunque esta no es la mejor manera de hacerlo,

176
00:13:50,700 --> 00:13:57,720
pero esto estoy haciendo en preparación para el próximo ejercicio sólo para

177
00:13:57,720 --> 00:14:04,920
ilustrar cómo un elemento de tarjeta material puede ser utilizado para nuestra aplicación.

178
00:14:04,920 --> 00:14:09,330
Entonces, voy a usar un div con un flex fx aquí,

179
00:14:09,330 --> 00:14:12,710
y luego a este div voy a agregar

180
00:14:12,710 --> 00:14:22,565
un nGIF con el SelectedDish.

181
00:14:22,565 --> 00:14:28,045
Entonces, tenga en cuenta que estoy aplicando un nGIF a este div aquí para

182
00:14:28,045 --> 00:14:33,330
especificar que si el SelectedDish es actualmente nulo,

183
00:14:33,330 --> 00:14:37,535
entonces no agregaré este div al dom.

184
00:14:37,535 --> 00:14:38,920
Si no es así,

185
00:14:38,920 --> 00:14:42,050
entonces este div se agregará al dom,

186
00:14:42,050 --> 00:14:48,485
y mostrará el elemento de la tarjeta con el contenido en el If.

187
00:14:48,485 --> 00:14:55,760
Entonces, voy a usar un elemento de tarjeta para mostrar los detalles del SelectedDish.

188
00:14:55,760 --> 00:14:57,290
Así que, para hacer eso,

189
00:14:57,290 --> 00:15:02,870
utilizo una tarjeta de estera aquí de la tarjeta de diseños de material aquí.

190
00:15:02,870 --> 00:15:05,090
La mat-card en sí tiene

191
00:15:05,090 --> 00:15:10,375
un encabezado de mat-card parte

192
00:15:10,375 --> 00:15:15,640
y también junto con el mat-card-header,

193
00:15:15,640 --> 00:15:21,010
tendrá un mat-card-content.

194
00:15:21,010 --> 00:15:25,055
Permítanme cerrar ese contenido de la tarjeta de mat-content.

195
00:15:25,055 --> 00:15:27,785
Entonces, en el encabezado, ¿qué quiero mostrar en el encabezado?

196
00:15:27,785 --> 00:15:31,725
En el encabezado, quiero usar

197
00:15:31,725 --> 00:15:37,600
un mat-card-title para mostrar

198
00:15:37,600 --> 00:15:44,490
los detalles del nombre del SelectedDish aquí.

199
00:15:44,490 --> 00:15:53,755
Entonces, entraría y diría h3 y cerraría el h3 y dentro de aquí voy a

200
00:15:53,755 --> 00:15:59,870
usar la interpolación y luego diría

201
00:16:00,240 --> 00:16:09,035
seltedDish name y pipe mayúsculas.

202
00:16:09,035 --> 00:16:17,375
Entonces, tenga en cuenta cómo he incluido el nombre del SelectedDish usando el mat-card-title.

203
00:16:17,375 --> 00:16:22,750
Ahora, además, voy a usar un método,

204
00:16:23,720 --> 00:16:33,930
uno llamado imagen que toma un atributo llamado mat-card-image y

205
00:16:33,930 --> 00:16:43,630
la fuente sería como esperabas,

206
00:16:43,630 --> 00:16:49,270
esto debería ser seleccionadoDisk.Image y

207
00:16:49,270 --> 00:16:54,310
entonces la alternativa voy

208
00:16:54,310 --> 00:17:01,640
a dar como selecteddish.Name.

209
00:17:03,450 --> 00:17:11,790
Por lo tanto, esta sería la imagen que se incluirá en mi tarjeta aquí.

210
00:17:11,790 --> 00:17:13,905
Así que, en el contenido,

211
00:17:13,905 --> 00:17:27,640
voy a incluir selectedDish descripción,

212
00:17:31,680 --> 00:17:36,105
y luego junto con el contenido aquí,

213
00:17:36,105 --> 00:17:41,860
también puedo añadir algunos botones a la parte inferior de la tarjeta.

214
00:17:41,860 --> 00:17:54,445
Entonces, usaré mat-card-actions aquí y dentro de

215
00:17:54,445 --> 00:17:58,585
allí puedo incluir un botón.

216
00:17:58,585 --> 00:18:06,550
Entonces, ves que este es el uso de un botón

217
00:18:06,550 --> 00:18:14,210
en mi aplicación, dos botones.

218
00:18:16,130 --> 00:18:20,040
Observe el uso de este botón de la alfombra aquí.

219
00:18:20,040 --> 00:18:26,360
Entonces, esto convertirá este botón en un diseño de material como el botón aquí,

220
00:18:26,360 --> 00:18:30,725
y así, estos dos botones aparecerán en la parte inferior de mi tarjeta aquí.

221
00:18:30,725 --> 00:18:35,065
Entonces, con esto, he agregado los detalles del SelectedDish.

222
00:18:35,065 --> 00:18:36,980
Hay una razón para que yo haga esto.

223
00:18:36,980 --> 00:18:40,910
Te estoy mostrando cómo puedes mostrar los detalles en una tarjeta,

224
00:18:40,910 --> 00:18:45,435
bueno, esto está en preparación para tu primera asignación.

225
00:18:45,435 --> 00:18:52,700
Por lo tanto, puede ver cómo podemos usar una tarjeta de diseño de material en nuestra plantilla aquí.

226
00:18:52,700 --> 00:18:59,565
Al ir a @module .ts, tenemos que importar la tarjeta y el módulo de botón.

227
00:18:59,565 --> 00:19:07,390
Así que, subiendo a la parte superior diremos importar MatCardModule desde la tarjeta de material angular

228
00:19:07,390 --> 00:19:13,555
y

229
00:19:13,555 --> 00:19:23,150
importar MatButtonModule desde el botón de material angular.

230
00:19:23,700 --> 00:19:27,280
Ahora que hemos añadido estos dos a la parte superior,

231
00:19:27,280 --> 00:19:31,389
vamos al decorador,

232
00:19:31,389 --> 00:19:40,580
y en las importaciones vamos a añadir en MatCardModule y MatPatternModule.

233
00:19:41,430 --> 00:19:46,945
Así que, guardemos los cambios y luego echemos un vistazo rápido a nuestra página web.

234
00:19:46,945 --> 00:19:50,535
Echando un vistazo a nuestra aplicación angular en el navegador,

235
00:19:50,535 --> 00:19:54,690
ahora ves que tenemos el menú que se muestra

236
00:19:54,690 --> 00:20:00,255
aquí y luego en la parte inferior ahora tenemos un elemento de tarjeta.

237
00:20:00,255 --> 00:20:06,090
Por lo tanto, se puede ver el elemento de la tarjeta aquí con el título allí y la imagen allí.

238
00:20:06,090 --> 00:20:09,770
Por supuesto, la imagen se ve horrendo porque es

239
00:20:09,770 --> 00:20:12,990
el tamaño real de la imagen que te he dado es tan

240
00:20:12,990 --> 00:20:17,130
pequeño y se ha expandido para llenar toda la pantalla.

241
00:20:17,130 --> 00:20:20,075
Mira el fondo aquí. Por lo tanto, este

242
00:20:20,075 --> 00:20:24,625
contiene la descripción de la imagen y luego dos botones aquí,

243
00:20:24,625 --> 00:20:26,020
justo abajo aquí.

244
00:20:26,020 --> 00:20:35,990
Entonces, así es como el botón de estera estiliza los botones en una plantilla angular,

245
00:20:35,990 --> 00:20:37,395
para que tengas como y el botón de compartir.

246
00:20:37,395 --> 00:20:39,070
Por supuesto, no están haciendo nada,

247
00:20:39,070 --> 00:20:43,695
pero tenga en cuenta el diseño del material como el comportamiento está allí.

248
00:20:43,695 --> 00:20:45,070
Así que, cuando haces clic en el botón,

249
00:20:45,070 --> 00:20:48,100
puedes ver las ondas pasando.

250
00:20:48,100 --> 00:20:52,440
Entonces, esa es la razón por la que decidí usar

251
00:20:52,440 --> 00:21:04,260
el módulo de material angular para diseñar las plantillas en este curso.

252
00:21:04,260 --> 00:21:07,700
Así que, echándole un vistazo en un dispositivo más pequeño,

253
00:21:07,700 --> 00:21:11,960
se ve mucho más atractivo en un dispositivo más pequeño.

254
00:21:11,960 --> 00:21:16,000
Así, se puede ver que la representación es mucho mejor en un dispositivo más pequeño,

255
00:21:16,000 --> 00:21:19,715
se puede ver que en la pantalla se puede ver

256
00:21:19,715 --> 00:21:27,245
la tarjeta allí mostrando los detalles y los dos botones allí,

257
00:21:27,245 --> 00:21:29,750
similares y el botón de compartir,

258
00:21:29,750 --> 00:21:34,190
y los detalles del plato.

259
00:21:37,080 --> 00:21:40,650
Entonces, eso completa este ejercicio.

260
00:21:40,650 --> 00:21:42,170
Así que, en este ejercicio,

261
00:21:42,170 --> 00:21:49,800
hemos examinado el uso de la lista de cuadrícula y

262
00:21:49,800 --> 00:22:00,030
los componentes de diseño de material de la tarjeta para diseñar la plantilla para nuestro componente de menú.

263
00:22:00,030 --> 00:22:05,720
Este puede ser un buen momento para que usted haga un buen comentario con el mensaje,

264
00:22:05,720 --> 00:22:09,620
Componentes angulares parte dos.