1
00:00:03,650 --> 00:00:11,280
Il est temps de poursuivre notre prochain exercice où nous examinerons à nouveau les composantes.

2
00:00:11,280 --> 00:00:15,600
Nous allons modifier le modèle pour

3
00:00:15,600 --> 00:00:20,670
le composant de menu que nous avons déjà inclus dans notre application Angular

4
00:00:20,670 --> 00:00:30,580
en utilisant un nouveau type de composant matériel pour mettre en page notre menu d'une manière différente.

5
00:00:30,580 --> 00:00:36,625
En cours de route, nous examinerons également l'utilisation de la directive structurelle nGiF.

6
00:00:36,625 --> 00:00:40,790
En allant dans le fichier template de notre composant de menu,

7
00:00:40,790 --> 00:00:44,685
Je vais apporter quelques modifications à ce fichier template.

8
00:00:44,685 --> 00:00:47,900
Tout d'abord, je vais ajouter dans un autre div ici

9
00:00:47,900 --> 00:00:56,170
avec FxFlex et ensuite fermer ce div là.

10
00:00:56,170 --> 00:01:01,245
Donc, remarquez que maintenant à l'intérieur de mon div externe,

11
00:01:01,245 --> 00:01:03,050
j'ai deux divs ici.

12
00:01:03,050 --> 00:01:07,855
Donc, un avec le div et le second avec la liste vide.

13
00:01:07,855 --> 00:01:15,880
Donc, ce sont deux éléments de contenu qui doivent être disposés sur l'écran.

14
00:01:15,880 --> 00:01:19,450
Mais notez que j'ai spécifié le FXLayout pour être coloré.

15
00:01:19,450 --> 00:01:21,590
Donc, ce qui signifie que, ces deux morceaux de contenu

16
00:01:21,590 --> 00:01:24,445
seront disposés l'un sur l'autre,

17
00:01:24,445 --> 00:01:27,025
empilés l'un sur l'autre.

18
00:01:27,025 --> 00:01:29,370
Donc, dans la première div,

19
00:01:29,370 --> 00:01:32,330
, je vais inclure un peu de contenu ici.

20
00:01:32,330 --> 00:01:38,570
Donc, je vais mettre un autre div à l'intérieur ici.

21
00:01:38,570 --> 00:01:42,005
Plus tard, je vais ajouter plus dans ce div.

22
00:01:42,005 --> 00:01:50,625
Mais pour le moment, je n'aurai qu'un h3 avec l'élément de menu là-bas,

23
00:01:50,625 --> 00:01:56,875
, puis ajouterai un élément de ligne horizontale à ce menu.

24
00:01:56,875 --> 00:02:02,780
Donc, cela donnera le titre de

25
00:02:02,780 --> 00:02:08,900
cette page particulière directement en haut dans mon application quand elle est rendue.

26
00:02:08,900 --> 00:02:12,395
Donc, c'est une modification.

27
00:02:12,395 --> 00:02:14,070
Maintenant, pour la deuxième partie,

28
00:02:14,070 --> 00:02:16,435
au lieu d'utiliser le mat-list-item,

29
00:02:16,435 --> 00:02:21,830
je vais maintenant prendre l'aide d'une mat-grid-list.

30
00:02:21,830 --> 00:02:26,000
Mat-Grid-list me permet de mettre en page le contenu comme

31
00:02:26,000 --> 00:02:30,625
une grille d'éléments plutôt qu'une liste d'éléments.

32
00:02:30,625 --> 00:02:38,220
Nous avons vu comment le menu était aménagé avec la liste des éléments de l'exercice précédent.

33
00:02:38,220 --> 00:02:41,810
Maintenant, je voudrais disposer le même menu d'une manière différente une disposition

34
00:02:41,810 --> 00:02:45,615
un peu plus attrayante pour le menu.

35
00:02:45,615 --> 00:02:48,140
Donc, au lieu d'utiliser la liste de mat-list,

36
00:02:48,140 --> 00:02:52,520
je vais maintenant changer ceci de mat-list à mat-grid-list.

37
00:02:52,520 --> 00:02:54,005
Donc, avant de faire cela,

38
00:02:54,005 --> 00:03:03,645
Je vais aussi l'inclure dans une autre div à laquelle j'appliquerai le FxFlex ici,

39
00:03:03,645 --> 00:03:10,320
afin que la mat-grid-list soit dans sa propre.

40
00:03:10,320 --> 00:03:14,540
Donc, cela me donnera plus de flexibilité pour ajouter des éléments

41
00:03:14,540 --> 00:03:19,180
à cette unité particulière si j'en ai besoin plus tard.

42
00:03:19,180 --> 00:03:23,505
La liste des grilles prend maintenant un paramètre appelé

43
00:03:23,505 --> 00:03:28,450
colonnes qui spécifie le nombre de colonnes que cette grille doit contenir.

44
00:03:28,450 --> 00:03:35,540
En ce moment, je vais spécifier les colonnes comme deux parce que je n'ai que quatre éléments dans mon menu.

45
00:03:35,540 --> 00:03:37,290
Donc, deux colonnes suffisent.

46
00:03:37,290 --> 00:03:41,995
Donc, au moins j'ai deux rangées de la grille là-bas.

47
00:03:41,995 --> 00:03:45,770
Aussi, cela prend un autre paramètre appelé

48
00:03:45,770 --> 00:03:50,010
comme RowHeight ou un attribut appelé RowHeight,

49
00:03:50,010 --> 00:03:56,650
que je spécifierai pour être 200 pixels ici.

50
00:03:56,680 --> 00:04:03,630
Donc, cela compléterait la liste de mat-grid-list que j'ai à l'intérieur de la div là-bas.

51
00:04:03,630 --> 00:04:09,120
Maintenant, une fois que j'ai fait le changement, puis à l'intérieur de ceci,

52
00:04:09,120 --> 00:04:12,700
Je vais entrer et utiliser,

53
00:04:12,700 --> 00:04:15,045
au lieu du mat-list-item,

54
00:04:15,045 --> 00:04:20,450
ce sera maintenant un mat-grille-tuile ici.

55
00:04:20,450 --> 00:04:22,480
Donc, la tuile de la grille.

56
00:04:22,480 --> 00:04:24,580
Fondamentalement, les tuiles de la grille.

57
00:04:24,580 --> 00:04:27,350
Cette grille, comme vous le réalisez,

58
00:04:27,350 --> 00:04:31,200
Je vais parcourir la liste des plats.

59
00:04:31,200 --> 00:04:35,090
Donc, j'utilise toujours ma directive ngFor avec elle.

60
00:04:35,090 --> 00:04:38,510
Ce mat-grille-tuile enfermera maintenant

61
00:04:38,510 --> 00:04:43,095
le contenu qui va être disposé dans chaque tuile de ma grille ici.

62
00:04:43,095 --> 00:04:45,320
Maintenant, à l'intérieur de la tuile,

63
00:04:45,320 --> 00:04:49,105
Je vais utiliser l'image telle qu'elle existe.

64
00:04:49,105 --> 00:04:53,990
Mais je vais utiliser l'image,

65
00:04:53,990 --> 00:04:58,750
pas avec le MatlistAvatar parce que cela ne peut pas être appliqué ici, et à la place,

66
00:04:58,750 --> 00:05:04,720
je vais spécifier la hauteur de l'image comme 200 pixels.

67
00:05:04,720 --> 00:05:09,230
Donc, cela correspond à la hauteur de la ligne afin que mon image s'étire

68
00:05:09,230 --> 00:05:14,325
toute la hauteur de ma tuile là-bas.

69
00:05:14,325 --> 00:05:16,830
Donc, la hauteur de l'image, 200 pixels,

70
00:05:16,830 --> 00:05:20,190
et la source et l'alt resteront en tant que tels.

71
00:05:20,190 --> 00:05:22,745
Ensuite, la partie suivante,

72
00:05:22,745 --> 00:05:24,830
au lieu du h1,

73
00:05:24,830 --> 00:05:27,110
Je vais changer celui-ci

74
00:05:27,110 --> 00:05:33,880
pour être

75
00:05:33,880 --> 00:05:39,710
enfermé dans mat-grid-tuile-footer.

76
00:05:41,780 --> 00:05:49,770
Donc, quel que soit le contenu à l'intérieur ici apparaîtra dans le mat-grid-tuile-footer ici.

77
00:05:49,770 --> 00:05:54,035
Maintenant, à l'intérieur, je peux spécifier le contenu que je veux.

78
00:05:54,035 --> 00:05:57,295
Donc, pour la tuile de grille,

79
00:05:57,295 --> 00:06:00,170
étant donné la description complète est un peu trop.

80
00:06:00,170 --> 00:06:02,245
Donc, je vais supprimer cette description,

81
00:06:02,245 --> 00:06:05,765
et à la place, n'utiliser que le h1 là-bas.

82
00:06:05,765 --> 00:06:12,355
Maintenant, en plus, je vais prendre l'aide d'un tuyau angulaire ici.

83
00:06:12,355 --> 00:06:16,340
Le tuyau que je vais appliquer à cela, comme vous pouvez le voir,

84
00:06:16,340 --> 00:06:22,095
le tuyau est la barre verticale de votre clavier.

85
00:06:22,095 --> 00:06:25,440
Ensuite, j'utiliserai le tuyau majuscule.

86
00:06:25,440 --> 00:06:27,175
Alors, que fait ce tuyau ?

87
00:06:27,175 --> 00:06:32,795
Ce tuyau, le tuyau majuscule transformera le nom du plat de

88
00:06:32,795 --> 00:06:39,015
tout ce qu'il est en un mot entier avec des lettres majuscules.

89
00:06:39,015 --> 00:06:42,215
Donc, quel que soit le nom du plat serait rendu comme

90
00:06:42,215 --> 00:06:49,280
lettres complètement majuscules quand il est rendu sur le modèle là-bas.

91
00:06:49,280 --> 00:06:52,800
Donc, c'est l'utilisation d'un tuyau angulaire ici.

92
00:06:52,800 --> 00:06:56,870
Donc, nous allons utiliser plus de tuyaux angulaires à mesure que nous avançons.

93
00:06:56,870 --> 00:07:05,205
C'est notre première rencontre avec l'un des tuyaux angulaires intégrés dans ce cours.

94
00:07:05,205 --> 00:07:10,400
Donc, avec cela, nous avons maintenant modifié notre mise en page

95
00:07:10,400 --> 00:07:15,670
pour montrer cette div ici, puis cette liste de grille ici.

96
00:07:15,670 --> 00:07:17,240
Sauvegardons les modifications.

97
00:07:17,240 --> 00:07:21,070
En allant maintenant au fichier app.module.ts,

98
00:07:21,070 --> 00:07:24,640
nous devons importer le MattGridListModule là-dedans.

99
00:07:24,640 --> 00:07:27,660
Donc, en allant en haut là-bas, nous allons dire,

100
00:07:27,660 --> 00:07:36,490
« Importer MatGridListModule à partir de angulaire/material/grille/list. »

101
00:07:39,260 --> 00:07:42,055
Une fois que nous avons ajouté ceci,

102
00:07:42,055 --> 00:07:45,925
alors nous allons descendre aux importations dans le décorateur,

103
00:07:45,925 --> 00:07:53,210
et ensuite inclure le MattGridListModule dans les entrées.

104
00:07:53,210 --> 00:07:55,830
Sauvegardons encore les modifications.

105
00:07:55,830 --> 00:08:01,650
Allons jeter un coup d'œil à notre page Web et à quoi elle ressemble à l'écran.

106
00:08:01,650 --> 00:08:03,730
En allant sur notre page web,

107
00:08:03,730 --> 00:08:09,125
, vous pouvez maintenant voir que votre menu est maintenant aménagé d'une manière différente.

108
00:08:09,125 --> 00:08:13,590
Bien que, ce n'est pas vraiment si beau regarder le moment.

109
00:08:13,590 --> 00:08:15,230
Je ne suis pas designer,

110
00:08:15,230 --> 00:08:18,880
donc c'est le meilleur que j'ai pu obtenir de lui.

111
00:08:18,880 --> 00:08:22,330
Maintenant, si j'avais 20 éléments dans mon menu,

112
00:08:22,330 --> 00:08:27,110
alors je pourrais disposer plusieurs éléments sur chaque rangée et plusieurs colonnes,

113
00:08:27,110 --> 00:08:31,860
et ensuite je pourrais compresser l'espace que chaque article occupe,

114
00:08:31,860 --> 00:08:35,660
ou je peux augmenter la taille de l'image pour qu'elle occupe toute la chose jusqu'à ce qu'elle paraisse beaucoup plus attrayante

115
00:08:35,660 --> 00:08:40,245
sur l'écran.

116
00:08:40,245 --> 00:08:49,185
Maintenant, jetons un coup d'oeil à cette même chose quand elle est affichée sur l'écran d'un plus petit appareil.

117
00:08:49,185 --> 00:08:52,400
Donc, c'est là que je vais prendre l'aide de

118
00:08:52,400 --> 00:08:57,990
les options de développeur dans mon navigateur Chrome.

119
00:08:57,990 --> 00:09:01,175
Donc, je vais commencer ici les outils de développement.

120
00:09:01,175 --> 00:09:04,330
Quand j'ai les outils de développement ici,

121
00:09:04,330 --> 00:09:08,340
vous pouvez voir ce bouton ici disant, « Basculer la barre d'outils de l'appareil. »

122
00:09:08,340 --> 00:09:10,070
Alors, laisse-moi revenir en arrière.

123
00:09:10,070 --> 00:09:16,180
Ensuite, vous pouvez voir la même page rendue sur différentes tailles d'écran.

124
00:09:16,180 --> 00:09:23,210
Donc ici, vous voyez la page en cours de rendu dans un Galaxy S5,

125
00:09:23,210 --> 00:09:27,030
et puis la même chose

126
00:09:28,090 --> 00:09:34,435
vous pouvez le voir être rendu en mode paysage.

127
00:09:34,435 --> 00:09:39,110
Donc, vous pouvez voir que cela me permet de voir la même page

128
00:09:39,110 --> 00:09:44,490
sur différentes tailles d'écran en utilisant les outils de développement intégrés dans Android.

129
00:09:44,490 --> 00:09:48,755
Alors, regardons à quoi il ressemble sur un iPhone.

130
00:09:48,755 --> 00:09:51,815
Le menu semble beaucoup plus attrayant ici.

131
00:09:51,815 --> 00:09:55,220
C'est ce que je voudrais réaliser sur l'écran.

132
00:09:55,220 --> 00:10:02,155
Si mes images étaient beaucoup plus grandes en taille même sur les écrans haute résolution,

133
00:10:02,155 --> 00:10:06,045
le menu ressemblerait à ceci.

134
00:10:06,045 --> 00:10:11,205
En mode paysage, c'est à ça que ça va ressembler.

135
00:10:11,205 --> 00:10:15,045
Maintenant, prenez note de ces outils de développement dans Chrome.

136
00:10:15,045 --> 00:10:21,790
Nous allons utiliser les outils de développement plus tard lorsque nous utilisons Angular en

137
00:10:21,790 --> 00:10:25,340
plus en détail parce que nous pouvons examiner des choses comme ce que Angular

138
00:10:25,340 --> 00:10:30,180
peut imprimer pour nous sur la console.

139
00:10:30,180 --> 00:10:36,650
Ensuite, nous pouvons même examiner comment les différentes parties de notre application sont récupérées.

140
00:10:36,650 --> 00:10:40,440
Nous pouvons regarder les performances réseau de notre application, et ainsi de suite.

141
00:10:40,440 --> 00:10:45,110
Donc, c'est là que l'ajout de ces outils de développement est très,

142
00:10:45,110 --> 00:10:47,270
très utile pour nous.

143
00:10:47,270 --> 00:10:51,100
Retourner à la manière normale,

144
00:10:51,100 --> 00:10:56,790
c'est à quoi ressemble notre page Web sur un navigateur de bureau standard.

145
00:10:56,790 --> 00:10:58,545
Nous n'avons pas encore fini.

146
00:10:58,545 --> 00:11:02,955
Revenons aux composants du menu.

147
00:11:02,955 --> 00:11:07,200
Fichier dactylographié et ensuite ce plat que j'ai

148
00:11:07,200 --> 00:11:11,765
défini ici au lieu de garder ceci dans ma classe,

149
00:11:11,765 --> 00:11:18,060
Je vais déplacer cette vaisselle dans une constante que j'

150
00:11:18,060 --> 00:11:25,670
définirai juste là-haut et nous le nommerons comme des plats de const,

151
00:11:25,860 --> 00:11:31,370
et ce serait du type plat un tableau,

152
00:11:31,370 --> 00:11:38,825
et puis je va couper tout cet ensemble de plats d'ici et ensuite le déplacer là-haut.

153
00:11:38,825 --> 00:11:43,450
Ceci est en préparation pour un futur exercice où nous allons

154
00:11:43,450 --> 00:11:50,050
pour ne pas inclure ce genre de données dans notre application,

155
00:11:50,050 --> 00:11:59,950
mais nous allons plutôt déplacer cela dans un service.

156
00:11:59,950 --> 00:12:05,260
Donc, ce que j'ai fait c'est couper que l'information de la vaisselle et

157
00:12:05,260 --> 00:12:11,405
puis mettre dans une constante ici avec le nom des plats dans toutes les capitales ici,

158
00:12:11,405 --> 00:12:16,100
et puis maintenant mes plats sont laissés comme un orphelin ici.

159
00:12:16,100 --> 00:12:26,275
Donc, je vais le rendre égal à la vaisselle ici.

160
00:12:26,275 --> 00:12:31,165
Maintenant, vous devez vous demander comment se fait-il que j'aie retiré le type de la vaisselle.

161
00:12:31,165 --> 00:12:35,125
TypeScript est assez intelligent pour réaliser que lorsque vous faites cela,

162
00:12:35,125 --> 00:12:40,360
, il attribuera automatiquement le type aux plats pour correspondre à ce que vous avez dans les plats.

163
00:12:40,360 --> 00:12:44,195
Donc, même si vous ne le tapez pas dans TypeScript le fera,

164
00:12:44,195 --> 00:12:47,350
mais si vous voulez être complètement clair, vous

165
00:12:47,350 --> 00:12:50,925
pouvez le faire aussi et cela fonctionnera tout aussi bien.

166
00:12:50,925 --> 00:12:53,920
Ok, si vous préférez, cela le laissera comme tel.

167
00:12:53,920 --> 00:13:01,795
Maintenant, en plus, je vais introduire une autre variable ici appelée SelectedDish.

168
00:13:01,795 --> 00:13:08,665
Cette variable que je vais utiliser dans cet exercice et l'un des exercices ultérieurs aussi.

169
00:13:08,665 --> 00:13:17,875
Donc, je vais rendre cela égal au premier plat de mon tableau.

170
00:13:17,875 --> 00:13:24,730
Maintenant, ce SelectedDish sera utile pour la prochaine partie de cet exercice.

171
00:13:24,730 --> 00:13:29,265
Alors, sauvegardons les modifications, puis revenons à notre modèle.

172
00:13:29,265 --> 00:13:33,460
Dans le modèle, ce que je vais faire est juste en dessous du menu,

173
00:13:33,460 --> 00:13:39,825
Je vais utiliser un élément de carte de matériel angulaire à

174
00:13:39,825 --> 00:13:46,555
afficher ce SelectedDish juste en dessous du menu là-bas.

175
00:13:46,555 --> 00:13:50,700
Maintenant, bien que ce ne soit pas la meilleure façon de le faire,

176
00:13:50,700 --> 00:13:57,720
mais ceci que je fais en préparation pour le prochain exercice juste pour

177
00:13:57,720 --> 00:14:04,920
vous illustrer comment un élément de carte matériel peut être utilisé pour notre application.

178
00:14:04,920 --> 00:14:09,330
Donc, je vais utiliser un div avec un flex fx ici,

179
00:14:09,330 --> 00:14:12,710
et puis à ce div je vais ajouter en

180
00:14:12,710 --> 00:14:22,565
un NGiF avec le SelectedDish.

181
00:14:22,565 --> 00:14:28,045
Donc, notez que j'applique un NGif à ce div ici pour

182
00:14:28,045 --> 00:14:33,330
spécifier que si le SelectedDish est actuellement nul,

183
00:14:33,330 --> 00:14:37,535
alors je n'ajouterai pas ce div au dom.

184
00:14:37,535 --> 00:14:38,920
Si ce n'est pas le cas,

185
00:14:38,920 --> 00:14:42,050
alors cette div sera ajoutée au dom,

186
00:14:42,050 --> 00:14:48,485
et affichera l'élément de carte avec le contenu dans le If.

187
00:14:48,485 --> 00:14:55,760
Donc, je vais utiliser un élément de carte pour afficher les détails du SelectedDish.

188
00:14:55,760 --> 00:14:57,290
Donc, pour ce faire,

189
00:14:57,290 --> 00:15:02,870
J'utilise une carte de mat-card ici de la carte de conceptions de matériaux ici.

190
00:15:02,870 --> 00:15:05,090
La carte de mat-card elle-même a

191
00:15:05,090 --> 00:15:10,375
une partie d'en-tête de mat-card

192
00:15:10,375 --> 00:15:15,640
et aussi avec le mat-card-header,

193
00:15:15,640 --> 00:15:21,010
elle aura un mat-card-content.

194
00:15:21,010 --> 00:15:25,055
Laissez-moi fermer ce mat-card-content.

195
00:15:25,055 --> 00:15:27,785
Alors, dans l'en-tête, que dois-je montrer dans l'en-tête ?

196
00:15:27,785 --> 00:15:31,725
Dans l'en-tête, je veux utiliser

197
00:15:31,725 --> 00:15:37,600
un mat-card-title pour afficher

198
00:15:37,600 --> 00:15:44,490
les détails du nom du SelectedDish ici.

199
00:15:44,490 --> 00:15:53,755
Donc, j'irais dire h3 et fermer le h3 et ici je vais utiliser

200
00:15:53,755 --> 00:15:59,870
l'interpolation et ensuite dire

201
00:16:00,240 --> 00:16:09,035
SelectedDish nom et pipe majuscules.

202
00:16:09,035 --> 00:16:17,375
Donc, notez comment j'ai inclus le nom du SelectedDish en utilisant le mat-card-title.

203
00:16:17,375 --> 00:16:22,750
Maintenant, en plus, je vais utiliser une méthode,

204
00:16:23,720 --> 00:16:33,930
une image appelée qui prend un attribut appelé mat-card-image et

205
00:16:33,930 --> 00:16:43,630
la source serait comme vous vous attendiez,

206
00:16:43,630 --> 00:16:49,270
cela devrait être selectedDish.image et

207
00:16:49,270 --> 00:16:54,310
puis l'alternative que je vais

208
00:16:54,310 --> 00:17:01,640
pour donner comme selectedDish.name.

209
00:17:03,450 --> 00:17:11,790
Donc, ce serait l'image qui sera incluse dans ma carte ici.

210
00:17:11,790 --> 00:17:13,905
Donc, dans le contenu,

211
00:17:13,905 --> 00:17:27,640
Je vais inclure SelectedDish description,

212
00:17:31,680 --> 00:17:36,105
et ensuite avec le contenu ici,

213
00:17:36,105 --> 00:17:41,860
je peux aussi ajouter quelques boutons au bas de la carte.

214
00:17:41,860 --> 00:17:54,445
Donc, je vais utiliser mat-card-actions ici et à l'intérieur

215
00:17:54,445 --> 00:17:58,585
, je peux inclure un bouton.

216
00:17:58,585 --> 00:18:06,550
Donc, vous voyez que c'est l'utilisation d'un bouton

217
00:18:06,550 --> 00:18:14,210
dans mon application, deux boutons.

218
00:18:16,130 --> 00:18:20,040
Remarquez l'utilisation de ce bouton mat-button ici.

219
00:18:20,040 --> 00:18:26,360
Donc, cela va transformer ce bouton en un design matériel comme bouton ici,

220
00:18:26,360 --> 00:18:30,725
et ainsi, ces deux boutons apparaîtront en bas de ma carte ici.

221
00:18:30,725 --> 00:18:35,065
Donc, avec cela, j'ai ajouté dans les détails du SelectedDish.

222
00:18:35,065 --> 00:18:36,980
Il y a des raisons pour moi de le faire.

223
00:18:36,980 --> 00:18:40,910
Je vous montre comment vous pouvez afficher les détails dans une carte,

224
00:18:40,910 --> 00:18:45,435
bien, ceci est en préparation pour votre première mission.

225
00:18:45,435 --> 00:18:52,700
Donc, vous pouvez voir comment nous pouvons utiliser une carte de conception matérielle dans notre modèle ici.

226
00:18:52,700 --> 00:18:59,565
En allant à @module .ts, nous devons importer la carte et le module de bouton.

227
00:18:59,565 --> 00:19:07,390
Donc, en allant au sommet, nous allons dire importer MatCardModule à partir de la carte matérielle angulaire

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

229
00:19:13,555 --> 00:19:23,150
importer MatButtonModule à partir du bouton matériau angulaire.

230
00:19:23,700 --> 00:19:27,280
Maintenant que nous avons ajouté ces deux vers le haut,

231
00:19:27,280 --> 00:19:31,389
allons au décorateur,

232
00:19:31,389 --> 00:19:40,580
et dans les importations nous allons ajouter dans le MatCardModule et le MatPatternModule.

233
00:19:41,430 --> 00:19:46,945
Alors, sauvegardons les changements, puis jetez un coup d'œil à notre page web.

234
00:19:46,945 --> 00:19:50,535
En regardant notre application angulaire dans le navigateur,

235
00:19:50,535 --> 00:19:54,690
vous voyez maintenant que nous avons le menu affiché

236
00:19:54,690 --> 00:20:00,255
ici, puis en bas nous avons maintenant un élément de carte.

237
00:20:00,255 --> 00:20:06,090
Donc, vous pouvez voir l'élément de la carte ici avec le titre là-bas et l'image là-bas.

238
00:20:06,090 --> 00:20:09,770
Bien sûr, l'image semble horrible parce que c'est

239
00:20:09,770 --> 00:20:12,990
la taille réelle de l'image que je vous ai donnée est si

240
00:20:12,990 --> 00:20:17,130
petite et elle a été étendue pour remplir tout l'écran.

241
00:20:17,130 --> 00:20:20,075
Regardez le fond ici. Donc, ce

242
00:20:20,075 --> 00:20:24,625
contient la description de l'image, puis deux boutons ici,

243
00:20:24,625 --> 00:20:26,020
juste en bas ici.

244
00:20:26,020 --> 00:20:35,990
Donc, c'est ainsi que le mat-button styles les boutons dans un modèle angulaire,

245
00:20:35,990 --> 00:20:37,395
de sorte que vous avez comme et le bouton de partage.

246
00:20:37,395 --> 00:20:39,070
Bien sûr, ils ne font rien,

247
00:20:39,070 --> 00:20:43,695
mais notez la conception matérielle comme le comportement est là.

248
00:20:43,695 --> 00:20:45,070
Donc, quand vous cliquez sur le bouton,

249
00:20:45,070 --> 00:20:48,100
vous pouvez voir les ondulations qui passent.

250
00:20:48,100 --> 00:20:52,440
Donc, c'est la raison pour laquelle j'ai décidé d'utiliser

251
00:20:52,440 --> 00:21:04,260
le module de matériau angulaire pour concevoir les modèles dans ce cours.

252
00:21:04,260 --> 00:21:07,700
Donc, en regardant sur un appareil plus petit,

253
00:21:07,700 --> 00:21:11,960
il semble beaucoup plus attrayant sur un appareil plus petit.

254
00:21:11,960 --> 00:21:16,000
Donc, vous pouvez voir que le rendu est beaucoup mieux sur un appareil plus petit,

255
00:21:16,000 --> 00:21:19,715
vous pouvez voir que sur l'écran vous pouvez voir

256
00:21:19,715 --> 00:21:27,245
la carte juste là montrant les détails et les deux boutons là,

257
00:21:27,245 --> 00:21:29,750
le like et le bouton de partage,

258
00:21:29,750 --> 00:21:34,190
et les détails du plat.

259
00:21:37,080 --> 00:21:40,650
Donc, cela complète cet exercice.

260
00:21:40,650 --> 00:21:42,170
Ainsi, dans cet exercice,

261
00:21:42,170 --> 00:21:49,800
, nous avons examiné l'utilisation de la liste de grille et

262
00:21:49,800 --> 00:22:00,030
les composants de conception de matériel de carte pour concevoir le modèle de notre composant de menu.

263
00:22:00,030 --> 00:22:05,720
C'est peut-être un bon moment pour vous de faire un bon commentaire avec le message,

264
00:22:05,720 --> 00:22:09,620
Composants angulaires deuxième partie.