1
00:00:03,650 --> 00:00:11,280
È ora di continuare con il nostro prossimo esercizio in cui esamineremo ancora una volta i componenti.

2
00:00:11,280 --> 00:00:15,600
Modificheremo il modello per

3
00:00:15,600 --> 00:00:20,670
il componente di menu che abbiamo già incluso nella nostra applicazione Angular

4
00:00:20,670 --> 00:00:30,580
utilizzando un nuovo tipo di componente materiale per il layout del nostro menu in modo diverso.

5
00:00:30,580 --> 00:00:36,625
Lungo il percorso, esamineremo anche l'uso della direttiva strutturale NGif.

6
00:00:36,625 --> 00:00:40,790
Andando al file modello del nostro componente menu,

7
00:00:40,790 --> 00:00:44,685
ho intenzione di apportare alcune modifiche a questo file modello. Per

8
00:00:44,685 --> 00:00:47,900
prima cosa, aggiungerò un altro div qui

9
00:00:47,900 --> 00:00:56,170
con FxFlex e poi chiuderò quel div lì.

10
00:00:56,170 --> 00:01:01,245
Quindi, nota che ora all'interno del mio div esterno,

11
00:01:01,245 --> 00:01:03,050
ho due div qui.

12
00:01:03,050 --> 00:01:07,855
Quindi, uno con il div e il secondo con la lista vuota.

13
00:01:07,855 --> 00:01:15,880
Quindi, questi sono due pezzi di contenuto che devono essere disposti sullo schermo.

14
00:01:15,880 --> 00:01:19,450
Ma nota che ho specificato che FxLayout deve essere colorato.

15
00:01:19,450 --> 00:01:21,590
Quindi, il che significa che, questi due pezzi di

16
00:01:21,590 --> 00:01:24,445
contenuto saranno disposti uno sopra l'altro,

17
00:01:24,445 --> 00:01:27,025
impilati uno sopra l'altro.

18
00:01:27,025 --> 00:01:29,370
Quindi, nel primo div,

19
00:01:29,370 --> 00:01:32,330
includerò un po 'di contenuto qui.

20
00:01:32,330 --> 00:01:38,570
Quindi, metterò un altro div qui dentro.

21
00:01:38,570 --> 00:01:42,005
Più tardi, aggiungerò di più in questo div.

22
00:01:42,005 --> 00:01:50,625
Ma per il momento, avrò solo un h3 con la voce di menu lì,

23
00:01:50,625 --> 00:01:56,875
e quindi aggiungerò un elemento di linea orizzontale a questo menu.

24
00:01:56,875 --> 00:02:02,780
Quindi, questo darà il titolo per

25
00:02:02,780 --> 00:02:08,900
questa particolare pagina proprio in cima alla mia applicazione quando viene renderizzata.

26
00:02:08,900 --> 00:02:12,395
Quindi, questa è una modifica.

27
00:02:12,395 --> 00:02:14,070
Ora, per la seconda parte,

28
00:02:14,070 --> 00:02:16,435
invece di usare il mat-list-item,

29
00:02:16,435 --> 00:02:21,830
ora prenderò l'aiuto di un mat-grid-list.

30
00:02:21,830 --> 00:02:26,000
Mat-grid-list mi consente di layout del contenuto come

31
00:02:26,000 --> 00:02:30,625
una griglia di elementi piuttosto che un elenco di elementi.

32
00:02:30,625 --> 00:02:38,220
Abbiamo visto come il menu è stato disposto con l'elenco degli elementi nell'esercizio precedente.

33
00:02:38,220 --> 00:02:41,810
Ora, vorrei disporre lo stesso menu in un modo diverso un

34
00:02:41,810 --> 00:02:45,615
po 'più attraente layout per il menu.

35
00:02:45,615 --> 00:02:48,140
Quindi, invece di usare la mat-list,

36
00:02:48,140 --> 00:02:52,520
ora cambierò questo da mat-list a una mat-grid-list.

37
00:02:52,520 --> 00:02:54,005
Quindi, prima di farlo,

38
00:02:54,005 --> 00:03:03,645
racchiuderò anche questo all'interno di un altro div a cui applicherò il FxFlex qui, in

39
00:03:03,645 --> 00:03:10,320
modo che la mat-grid-list sia nel suo lì.

40
00:03:10,320 --> 00:03:14,540
Quindi, questo mi darà più flessibilità per aggiungere articoli

41
00:03:14,540 --> 00:03:19,180
a questa particolare unità se ne ho bisogno in seguito.

42
00:03:19,180 --> 00:03:23,505
La lista griglia ora accetta un parametro chiamato come

43
00:03:23,505 --> 00:03:28,450
colonne che specifica quante colonne dovrebbe contenere questa griglia.

44
00:03:28,450 --> 00:03:35,540
In questo momento specificherò le colonne come due perché ho solo quattro voci nel mio menu.

45
00:03:35,540 --> 00:03:37,290
Quindi, due colonne sono sufficienti.

46
00:03:37,290 --> 00:03:41,995
Quindi, almeno ho due file della griglia lì.

47
00:03:41,995 --> 00:03:45,770
Inoltre, questo accetta un altro parametro chiamato

48
00:03:45,770 --> 00:03:50,010
come rowHeight o un attributo chiamato come rowHeight,

49
00:03:50,010 --> 00:03:56,650
che specificherò come 200 pixel qui.

50
00:03:56,680 --> 00:04:03,630
Quindi, questo completerebbe la lista di mat-grid-list che ho all'interno del div lì.

51
00:04:03,630 --> 00:04:09,120
Ora, una volta apportato il cambiamento, poi all'interno di questo,

52
00:04:09,120 --> 00:04:12,700
entrerò e userò,

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

54
00:04:15,045 --> 00:04:20,450
questo sarà ora un mat-grid-tile qui.

55
00:04:20,450 --> 00:04:22,480
Quindi, la tessera della griglia.

56
00:04:22,480 --> 00:04:24,580
Fondamentalmente, piastrelle della griglia.

57
00:04:24,580 --> 00:04:27,350
Questa tessera griglia, come ti rendi conto,

58
00:04:27,350 --> 00:04:31,200
sto per scorrere la lista dei piatti.

59
00:04:31,200 --> 00:04:35,090
Quindi, sto ancora usando la mia direttiva ngFor con esso.

60
00:04:35,090 --> 00:04:38,510
Questo mat-grid-tile ora racchiuderà

61
00:04:38,510 --> 00:04:43,095
il contenuto che verrà disposto in ogni riquadro della mia griglia qui.

62
00:04:43,095 --> 00:04:45,320
Ora, all'interno della tessera,

63
00:04:45,320 --> 00:04:49,105
userò l'immagine così come esiste.

64
00:04:49,105 --> 00:04:53,990
Ma userò l'immagine,

65
00:04:53,990 --> 00:04:58,750
non con MatlistAvatar perché non può essere applicato qui, e invece,

66
00:04:58,750 --> 00:05:04,720
specificherò l'altezza per l'immagine come 200 pixel.

67
00:05:04,720 --> 00:05:09,230
Quindi, questo corrisponde all'altezza della riga in modo che la mia immagine estenda

68
00:05:09,230 --> 00:05:14,325
l'intera altezza della mia tessera lì.

69
00:05:14,325 --> 00:05:16,830
Quindi, l'altezza dell'immagine, 200 pixel,

70
00:05:16,830 --> 00:05:20,190
e la sorgente e l'alt rimarranno come tali.

71
00:05:20,190 --> 00:05:22,745
Quindi, la parte successiva,

72
00:05:22,745 --> 00:05:24,830
invece di h1,

73
00:05:24,830 --> 00:05:27,110
cambierò questo per

74
00:05:27,110 --> 00:05:33,880
essere

75
00:05:33,880 --> 00:05:39,710
racchiuso all'interno di mat-grid-tile-footer.

76
00:05:41,780 --> 00:05:49,770
Quindi, qualunque contenuto sia qui dentro apparirà all'interno del mat-grid-tile-footer qui.

77
00:05:49,770 --> 00:05:54,035
Ora, dentro lì posso specificare qualsiasi contenuto che voglio.

78
00:05:54,035 --> 00:05:57,295
Quindi, per la tessera della griglia,

79
00:05:57,295 --> 00:06:00,170
data la descrizione completa è un po 'troppo.

80
00:06:00,170 --> 00:06:02,245
Quindi, ho intenzione di rimuovere questa descrizione,

81
00:06:02,245 --> 00:06:05,765
e invece, utilizzare solo l'h1 lì.

82
00:06:05,765 --> 00:06:12,355
Ora, inoltre, prenderò l'aiuto di un tubo angolare qui.

83
00:06:12,355 --> 00:06:16,340
Il tubo che ho intenzione di applicare a questo, come puoi vedere,

84
00:06:16,340 --> 00:06:22,095
il tubo è la barra verticale sulla tastiera.

85
00:06:22,095 --> 00:06:25,440
Quindi, userò il tubo maiuscolo.

86
00:06:25,440 --> 00:06:27,175
Allora, cosa fa questa pipa?

87
00:06:27,175 --> 00:06:32,795
Questa pipa, la pipa maiuscola trasformerà il nome del piatto da

88
00:06:32,795 --> 00:06:39,015
qualunque cosa sia in un'intera parola con lettere maiuscole.

89
00:06:39,015 --> 00:06:42,215
Quindi, qualunque sia il nome del piatto sarebbe reso come

90
00:06:42,215 --> 00:06:49,280
lettere completamente maiuscole quando viene eseguito il rendering sul modello lì.

91
00:06:49,280 --> 00:06:52,800
Quindi, questo è l'uso di un tubo angolare qui.

92
00:06:52,800 --> 00:06:56,870
Quindi, useremo più tubi angolari mentre andiamo avanti.

93
00:06:56,870 --> 00:07:05,205
Questo è il nostro primo incontro con uno dei tubi angolari incorporati in questo corso.

94
00:07:05,205 --> 00:07:10,400
Quindi, con questo, abbiamo ora modificato il nostro layout

95
00:07:10,400 --> 00:07:15,670
per mostrare questo div qui e poi questa lista di griglia qui.

96
00:07:15,670 --> 00:07:17,240
Salviamo le modifiche.

97
00:07:17,240 --> 00:07:21,070
Andando ora al file app.module.ts,

98
00:07:21,070 --> 00:07:24,640
abbiamo bisogno di importare il MatGridListModule lì dentro.

99
00:07:24,640 --> 00:07:27,660
Quindi, andando in cima lì, diremo,

100
00:07:27,660 --> 00:07:36,490
«Importa MatGridListModule da angolare/materiale/griglia/lista».

101
00:07:39,260 --> 00:07:42,055
Una volta aggiunto questo,

102
00:07:42,055 --> 00:07:45,925
allora andremo giù alle importazioni nel decoratore

103
00:07:45,925 --> 00:07:53,210
e quindi includeremo il MatGridListModule negli input.

104
00:07:53,210 --> 00:07:55,830
Salviamo, ancora una volta, le modifiche.

105
00:07:55,830 --> 00:08:01,650
Andiamo a dare un'occhiata veloce alla nostra pagina web e come appare sullo schermo.

106
00:08:01,650 --> 00:08:03,730
Andando alla nostra pagina web,

107
00:08:03,730 --> 00:08:09,125
ora puoi vedere che il tuo menu è ora disposto in un modo diverso.

108
00:08:09,125 --> 00:08:13,590
Anche se, non è davvero così bello guardare al momento.

109
00:08:13,590 --> 00:08:15,230
Non sono un designer,

110
00:08:15,230 --> 00:08:18,880
quindi questo è il meglio che ho potuto ottenere da esso.

111
00:08:18,880 --> 00:08:22,330
Ora, se avessi 20 elementi nel mio menu,

112
00:08:22,330 --> 00:08:27,110
potrei disporre più elementi su ogni riga e più colonne,

113
00:08:27,110 --> 00:08:31,860
e quindi potrei comprimere lo spazio che ogni elemento occupa,

114
00:08:31,860 --> 00:08:35,660
oppure posso aumentare la dimensione dell'immagine in modo che

115
00:08:35,660 --> 00:08:40,245
occupi l'intera cosa fino a quando sembrerà molto più attraente sul schermo.

116
00:08:40,245 --> 00:08:49,185
Ora, diamo un'occhiata a questa stessa cosa quando viene visualizzato in uno schermo di dispositivi più piccoli.

117
00:08:49,185 --> 00:08:52,400
Quindi, questo è dove ho intenzione di prendere l'aiuto

118
00:08:52,400 --> 00:08:57,990
delle opzioni di sviluppo nel mio browser Chrome.

119
00:08:57,990 --> 00:09:01,175
Quindi, inizierò gli strumenti di sviluppo qui.

120
00:09:01,175 --> 00:09:04,330
Quando ho gli strumenti di sviluppo qui,

121
00:09:04,330 --> 00:09:08,340
puoi vedere questo pulsante qui dicendo «Attiva/disattiva barra degli strumenti del dispositivo».

122
00:09:08,340 --> 00:09:10,070
Quindi, fammi tornare indietro.

123
00:09:10,070 --> 00:09:16,180
Quindi puoi vedere la stessa pagina che viene renderizzata su schermi di dimensioni diverse.

124
00:09:16,180 --> 00:09:23,210
Quindi qui, vedi la pagina che viene renderizzata in un Galaxy S5,

125
00:09:23,210 --> 00:09:27,030
e poi la stessa cosa

126
00:09:28,090 --> 00:09:34,435
puoi vedere che viene renderizzata in modalità orizzontale.

127
00:09:34,435 --> 00:09:39,110
Quindi, puoi vedere che questo mi consente di visualizzare la stessa pagina

128
00:09:39,110 --> 00:09:44,490
su schermi di diverse dimensioni utilizzando gli strumenti di sviluppo integrati in Android.

129
00:09:44,490 --> 00:09:48,755
Quindi, diamo un'occhiata a come appare su un iPhone.

130
00:09:48,755 --> 00:09:51,815
Il menu sembra molto più attraente qui.

131
00:09:51,815 --> 00:09:55,220
Questo è ciò che vorrei ottenere sullo schermo.

132
00:09:55,220 --> 00:10:02,155
Se le mie immagini fossero di dimensioni molto più grandi anche sugli schermi a risoluzione più alta,

133
00:10:02,155 --> 00:10:06,045
il menu sarebbe simile a questo.

134
00:10:06,045 --> 00:10:11,205
In modalità orizzontale, questo è come apparirà.

135
00:10:11,205 --> 00:10:15,045
Ora, prendi nota di questi strumenti di sviluppo in Chrome.

136
00:10:15,045 --> 00:10:21,790
Useremo gli strumenti di sviluppo più avanti quando usiamo Angular in

137
00:10:21,790 --> 00:10:25,340
modo più dettagliato perché possiamo esaminare cose come quello che Angular

138
00:10:25,340 --> 00:10:30,180
può stampare per noi sulla console.

139
00:10:30,180 --> 00:10:36,650
Quindi possiamo anche esaminare come vengono recuperate le diverse parti della nostra applicazione.

140
00:10:36,650 --> 00:10:40,440
Possiamo guardare le prestazioni di rete della nostra applicazione e così via.

141
00:10:40,440 --> 00:10:45,110
Quindi, questo è dove questi strumenti di sviluppo aggiunta è molto,

142
00:10:45,110 --> 00:10:47,270
molto utile per noi.

143
00:10:47,270 --> 00:10:51,100
Tornando al modo normale,

144
00:10:51,100 --> 00:10:56,790
questo è come appare la nostra pagina web su un browser desktop standard.

145
00:10:56,790 --> 00:10:58,545
Non abbiamo ancora finito.

146
00:10:58,545 --> 00:11:02,955
Torniamo ai componenti del menu.

147
00:11:02,955 --> 00:11:07,200
File dattiloscritto e poi questi piatti che ho

148
00:11:07,200 --> 00:11:11,765
definito qui invece di mantenere questo all'interno della mia classe,

149
00:11:11,765 --> 00:11:18,060
ho intenzione di spostare questi piatti in una costante che

150
00:11:18,060 --> 00:11:25,670
definirò proprio lassù e lo chiameremo come piatti const,

151
00:11:25,860 --> 00:11:31,370
e questo sarebbe del tipo piatto un array,

152
00:11:31,370 --> 00:11:38,825
e poi taglierò tutta questa serie di piatti da qui e poi spostarla lassù.

153
00:11:38,825 --> 00:11:43,450
Questo è in preparazione per un esercizio futuro in cui

154
00:11:43,450 --> 00:11:50,050
non includeremo questo tipo di dati nella nostra applicazione,

155
00:11:50,050 --> 00:11:59,950
ma invece lo sposteremo in un servizio.

156
00:11:59,950 --> 00:12:05,260
Quindi, quello che ho fatto è tagliare che le informazioni piatti e

157
00:12:05,260 --> 00:12:11,405
poi metterlo in una costante qui con il nome piatti in tutte le capitali qui,

158
00:12:11,405 --> 00:12:16,100
e poi ora i miei piatti sono lasciati come un orfano qui.

159
00:12:16,100 --> 00:12:26,275
Quindi, questo lo renderò uguale ai piatti qui.

160
00:12:26,275 --> 00:12:31,165
Ora, devi chiederti come mai ho rimosso il tipo per i piatti.

161
00:12:31,165 --> 00:12:35,125
TypeScript è abbastanza intelligente da rendersi conto che quando

162
00:12:35,125 --> 00:12:40,360
lo fai, assegnerà automaticamente il tipo ai piatti per abbinare ciò che hai nei piatti.

163
00:12:40,360 --> 00:12:44,195
Quindi, anche se non lo digiti in TypeScript lo farà,

164
00:12:44,195 --> 00:12:47,350
ma se vuoi essere completamente chiaro

165
00:12:47,350 --> 00:12:50,925
puoi farlo anche tu e funzionerà altrettanto bene.

166
00:12:50,925 --> 00:12:53,920
Ok, se preferisci questo lo lascera' come tale.

167
00:12:53,920 --> 00:13:01,795
Ora, in aggiunta, ho intenzione di introdurre un'altra variabile qui chiamata SelectedDish.

168
00:13:01,795 --> 00:13:08,665
Questa variabile ho intenzione di utilizzare in questo esercizio e uno degli esercizi successivi anche.

169
00:13:08,665 --> 00:13:17,875
Quindi, ho intenzione di rendere questo uguale al primo piatto nella mia matrice.

170
00:13:17,875 --> 00:13:24,730
Ora, questo SelectedDish sarà utile per la parte successiva di questo esercizio.

171
00:13:24,730 --> 00:13:29,265
Quindi, salviamo le modifiche e poi torniamo al nostro modello.

172
00:13:29,265 --> 00:13:33,460
Nel modello, quello che ho intenzione di fare è proprio sotto il menu,

173
00:13:33,460 --> 00:13:39,825
ho intenzione di utilizzare un elemento di carta da materiale angolare per

174
00:13:39,825 --> 00:13:46,555
visualizzare questo SelectedDish proprio sotto il menu lì.

175
00:13:46,555 --> 00:13:50,700
Ora, anche se questo non è il modo migliore per farlo,

176
00:13:50,700 --> 00:13:57,720
ma questo lo sto facendo in preparazione per il prossimo esercizio solo per

177
00:13:57,720 --> 00:14:04,920
illustrarvi come un elemento di carta materiale può essere utilizzato per la nostra applicazione.

178
00:14:04,920 --> 00:14:09,330
Quindi, ho intenzione di usare un div con un flex fx qui,

179
00:14:09,330 --> 00:14:12,710
e poi a questo div ho intenzione di aggiungere in

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

181
00:14:22,565 --> 00:14:28,045
Quindi, nota che sto applicando un NGIF a questo div qui per

182
00:14:28,045 --> 00:14:33,330
specificare che se SelectedDish è attualmente nullo,

183
00:14:33,330 --> 00:14:37,535
allora non aggiungerò questo div al dom.

184
00:14:37,535 --> 00:14:38,920
Se non lo è,

185
00:14:38,920 --> 00:14:42,050
allora questo div verrà aggiunto al dom

186
00:14:42,050 --> 00:14:48,485
e mostrerà l'elemento della scheda con il contenuto in If.

187
00:14:48,485 --> 00:14:55,760
Quindi, ho intenzione di utilizzare un elemento di carta per visualizzare i dettagli di SelectedDish.

188
00:14:55,760 --> 00:14:57,290
Quindi, per farlo,

189
00:14:57,290 --> 00:15:02,870
io uso una mat-card qui dalla scheda disegni materiali qui.

190
00:15:02,870 --> 00:15:05,090
La mat-card stessa ha

191
00:15:05,090 --> 00:15:10,375
una parte di intestazione mat-card

192
00:15:10,375 --> 00:15:15,640
e anche insieme all'intestazione mat-card,

193
00:15:15,640 --> 00:15:21,010
avrà un mat-card content.

194
00:15:21,010 --> 00:15:25,055
Lasciate che chiuda quel contenuto della scheda.

195
00:15:25,055 --> 00:15:27,785
Quindi, nell'intestazione, cosa voglio mostrare nell'intestazione?

196
00:15:27,785 --> 00:15:31,725
Nell' intestazione, voglio usare

197
00:15:31,725 --> 00:15:37,600
un mat-card-title per mostrare

198
00:15:37,600 --> 00:15:44,490
i dettagli del nome del selectedDish qui.

199
00:15:44,490 --> 00:15:53,755
Quindi, vorrei entrare e dire h3 e chiudere l'h3 e dentro qui ho intenzione di

200
00:15:53,755 --> 00:15:59,870
usare l'interpolazione e poi dire

201
00:16:00,240 --> 00:16:09,035
SelectedDish nome e pipe maiuscole.

202
00:16:09,035 --> 00:16:17,375
Quindi, nota come ho incluso il nome di SelectedDish usando il mat-card-title.

203
00:16:17,375 --> 00:16:22,750
Ora, in aggiunta, ho intenzione di utilizzare un metodo,

204
00:16:23,720 --> 00:16:33,930
uno chiamato immagine che prende un attributo chiamato mat-card-image e

205
00:16:33,930 --> 00:16:43,630
la fonte sarebbe come previsto,

206
00:16:43,630 --> 00:16:49,270
questo dovrebbe essere selectedDish.Image e

207
00:16:49,270 --> 00:16:54,310
quindi l'alternativa che ho intenzione di

208
00:16:54,310 --> 00:17:01,640
dare come selectedDish.name.

209
00:17:03,450 --> 00:17:11,790
Quindi, questa sarebbe l'immagine che verrà inclusa nella mia scheda qui.

210
00:17:11,790 --> 00:17:13,905
Quindi, nel contenuto,

211
00:17:13,905 --> 00:17:27,640
includerò la descrizione SelectedDish,

212
00:17:31,680 --> 00:17:36,105
e quindi insieme al contenuto qui,

213
00:17:36,105 --> 00:17:41,860
posso anche aggiungere alcuni pulsanti alla parte inferiore della scheda.

214
00:17:41,860 --> 00:17:54,445
Quindi, userò le azioni di mat-card qui e

215
00:17:54,445 --> 00:17:58,585
dentro posso includere un pulsante.

216
00:17:58,585 --> 00:18:06,550
Quindi, vedi che questo è l'uso di un pulsante

217
00:18:06,550 --> 00:18:14,210
nella mia applicazione, due pulsanti.

218
00:18:16,130 --> 00:18:20,040
Si noti l'uso di questo tappetino pulsante qui.

219
00:18:20,040 --> 00:18:26,360
Quindi, questo trasformerà questo pulsante in un design materiale come il pulsante qui,

220
00:18:26,360 --> 00:18:30,725
e così, questi due pulsanti appariranno nella parte inferiore della mia carta qui.

221
00:18:30,725 --> 00:18:35,065
Quindi, con questo, ho aggiunto i dettagli del SelectedDish.

222
00:18:35,065 --> 00:18:36,980
C' è ragione per me di farlo.

223
00:18:36,980 --> 00:18:40,910
Ti sto mostrando come puoi visualizzare i dettagli in una scheda,

224
00:18:40,910 --> 00:18:45,435
beh, questo è in preparazione per il tuo primo incarico.

225
00:18:45,435 --> 00:18:52,700
Quindi, puoi vedere come possiamo usare una scheda di progettazione materiale nel nostro modello qui.

226
00:18:52,700 --> 00:18:59,565
Andando a @module .ts, abbiamo bisogno di importare la scheda e il modulo pulsante.

227
00:18:59,565 --> 00:19:07,390
Quindi, salendo in cima diremo importare MatcardModule dalla

228
00:19:07,390 --> 00:19:13,555
scheda materiale angolare e

229
00:19:13,555 --> 00:19:23,150
importare MatButtonModule dal pulsante materiale angolare.

230
00:19:23,700 --> 00:19:27,280
Ora che abbiamo aggiunto questi due in alto,

231
00:19:27,280 --> 00:19:31,389
andiamo al decoratore,

232
00:19:31,389 --> 00:19:40,580
e nelle importazioni aggiungiamo il MatcardModule e il MatPatternModule.

233
00:19:41,430 --> 00:19:46,945
Quindi, salviamo le modifiche e poi diamo una rapida occhiata alla nostra pagina web.

234
00:19:46,945 --> 00:19:50,535
Dando un'occhiata alla nostra applicazione angolare nel browser,

235
00:19:50,535 --> 00:19:54,690
ora vedi che abbiamo il menu visualizzato

236
00:19:54,690 --> 00:20:00,255
qui e poi in basso ora abbiamo un elemento scheda.

237
00:20:00,255 --> 00:20:06,090
Quindi, puoi vedere l'elemento della carta qui con il titolo lì e l'immagine lì.

238
00:20:06,090 --> 00:20:09,770
Naturalmente, l'immagine sembra orribile perché è

239
00:20:09,770 --> 00:20:12,990
la dimensione effettiva dell'immagine che ti ho dato è così

240
00:20:12,990 --> 00:20:17,130
piccola ed è stata espansa per riempire l'intero schermo.

241
00:20:17,130 --> 00:20:20,075
Guarda qui in fondo. Quindi, questo

242
00:20:20,075 --> 00:20:24,625
contiene la descrizione dell'immagine e poi due pulsanti qui,

243
00:20:24,625 --> 00:20:26,020
proprio qui sotto.

244
00:20:26,020 --> 00:20:35,990
Quindi, questo è il modo in cui il mat-button stili i pulsanti in un modello angolare, in

245
00:20:35,990 --> 00:20:37,395
modo da avere come e il pulsante di condivisione.

246
00:20:37,395 --> 00:20:39,070
Certo, non stanno facendo nulla,

247
00:20:39,070 --> 00:20:43,695
ma nota il design del materiale come il comportamento è lì.

248
00:20:43,695 --> 00:20:45,070
Quindi, quando fai clic sul pulsante,

249
00:20:45,070 --> 00:20:48,100
puoi vedere le increspature che attraversano.

250
00:20:48,100 --> 00:20:52,440
Quindi, questo è il motivo per cui ho deciso di utilizzare

251
00:20:52,440 --> 00:21:04,260
il modulo materiale angolare per progettare i modelli in questo corso.

252
00:21:04,260 --> 00:21:07,700
Quindi, dandogli un'occhiata su un dispositivo più piccolo,

253
00:21:07,700 --> 00:21:11,960
sembra molto più attraente su un dispositivo più piccolo.

254
00:21:11,960 --> 00:21:16,000
Quindi, puoi vedere che il rendering è molto meglio su un dispositivo più piccolo,

255
00:21:16,000 --> 00:21:19,715
puoi vedere che sullo schermo puoi vedere

256
00:21:19,715 --> 00:21:27,245
la scheda che mostra i dettagli e i due pulsanti lì,

257
00:21:27,245 --> 00:21:29,750
il like e il pulsante di condivisione

258
00:21:29,750 --> 00:21:34,190
e i dettagli del piatto.

259
00:21:37,080 --> 00:21:40,650
Quindi, questo completa questo esercizio.

260
00:21:40,650 --> 00:21:42,170
Quindi, in questo esercizio,

261
00:21:42,170 --> 00:21:49,800
abbiamo esaminato l'uso della lista della griglia e dei

262
00:21:49,800 --> 00:22:00,030
componenti di progettazione del materiale della scheda per progettare il modello per il nostro componente di menu.

263
00:22:00,030 --> 00:22:05,720
Questo potrebbe essere un buon momento per fare un buon commento con il messaggio,

264
00:22:05,720 --> 00:22:09,620
Componenti angolari parte due.