1
00:00:00,000 --> 00:00:07,225
Maintenant que nous avons examiné la liaison de données,

2
00:00:07,225 --> 00:00:10,275
en faisons usage pour

3
00:00:10,275 --> 00:00:14,715
en travaillant sur l'application Angular que nous utilisons jusqu'à présent.

4
00:00:14,715 --> 00:00:17,504
Dans la version précédente de l'application Angular,

5
00:00:17,504 --> 00:00:20,190
nous avions le menu rendu,

6
00:00:20,190 --> 00:00:24,655
et ensuite nous avions un plat spécifique affiché en bas.

7
00:00:24,655 --> 00:00:28,770
Maintenant, nous aimerions idéalement que l'utilisateur soit en mesure de cliquer

8
00:00:28,770 --> 00:00:32,990
sur l'un des éléments du menu et ensuite les détails à afficher à l'utilisateur.

9
00:00:32,990 --> 00:00:37,325
C'est là que l'utilisation de la liaison de données nous aidera

10
00:00:37,325 --> 00:00:43,430
à implémenter notre application pour activer ce type de fonctionnalité.

11
00:00:43,430 --> 00:00:48,470
En allant à l'état actuel de notre application dans le navigateur,

12
00:00:48,470 --> 00:00:52,040
nous pouvons maintenant voir que nous avons notre menu et en bas nous

13
00:00:52,040 --> 00:00:56,370
avons les détails d'un plat spécifique qui y est montré.

14
00:00:56,370 --> 00:01:01,625
Maintenant, c'est bien et bon pour commencer, mais idéalement,

15
00:01:01,625 --> 00:01:06,350
ce que nous aimerions avoir, c'est que si l'utilisateur clique sur l'un de ces plats,

16
00:01:06,350 --> 00:01:12,585
nous voulons être en mesure de montrer les détails du plat au bas du menu ici.

17
00:01:12,585 --> 00:01:17,165
Donc, nous aimerions que les détails du plat soient changés

18
00:01:17,165 --> 00:01:22,250
en fonction de quel plat spécifique nous cliquons à tout moment.

19
00:01:22,250 --> 00:01:24,100
Alors, comment pouvons-nous y parvenir ?

20
00:01:24,100 --> 00:01:28,355
Donc, c'est là que l'utilisation de la liaison de données vient à notre rescousse.

21
00:01:28,355 --> 00:01:31,735
En allant à notre application,

22
00:01:31,735 --> 00:01:35,750
la première chose que je vais faire est dans le dossier partagé,

23
00:01:35,750 --> 00:01:45,090
maintenant vous vous rendez compte que l'information de plat est utilisée à la fois dans le composant de menu et dans le composant de détail de plat.

24
00:01:45,090 --> 00:01:49,100
Maintenant, quand vous avez des informations partagées comme ceci,

25
00:01:49,100 --> 00:01:53,120
, il serait plutôt plus pratique d'avoir un endroit centralisé

26
00:01:53,120 --> 00:01:57,170
à partir duquel ces informations sont fournies à ces deux composants.

27
00:01:57,170 --> 00:01:58,880
Donc pour m'aider à faire ça,

28
00:01:58,880 --> 00:02:03,470
ce que je vais faire est d'aller dans le dossier de partage, puis de créer un nouveau fichier,

29
00:02:03,470 --> 00:02:09,150
et ensuite je nomme ce fichier comme dishes.ts.

30
00:02:09,150 --> 00:02:11,540
A l'intérieur de ce fichier dishes.ts,

31
00:02:11,540 --> 00:02:16,840
Je vais créer la constante qui fournit les détails des plats.

32
00:02:16,840 --> 00:02:17,980
Donc, pour ce faire,

33
00:02:17,980 --> 00:02:27,380
Je voudrais d'abord importer le plat,

34
00:02:27,380 --> 00:02:34,400
de la classe de plat

35
00:02:34,400 --> 00:02:36,760
que j'ai déjà définie plus tôt.

36
00:02:36,760 --> 00:02:40,625
Alors maintenant, je peux définir une constante

37
00:02:40,625 --> 00:02:48,230
appelée comme plats du type un tableau de plats,

38
00:02:48,230 --> 00:02:53,590
et c'est là que je vais stocker les détails de tous mes plats.

39
00:02:53,590 --> 00:02:56,495
Maintenant, dans la version précédente de l'application,

40
00:02:56,495 --> 00:03:00,500
nous avons vu l'utilisation des plats et nous avons vu

41
00:03:00,500 --> 00:03:04,610
le tableau d'objets JavaScript qui contient les détails des plats.

42
00:03:04,610 --> 00:03:09,830
Maintenant, nous allons déplacer tout ce contenu et avec une version mise à jour de celui-ci.

43
00:03:09,830 --> 00:03:12,485
Donc, une version mise à jour du tableau d'objets JavaScript de la vaisselle

44
00:03:12,485 --> 00:03:16,520
vous est donnée dans les instructions,

45
00:03:16,520 --> 00:03:18,065
alors allez simplement copier

46
00:03:18,065 --> 00:03:22,760
l'ensemble du tableau d'objets JavaScript à partir de là et puis nous le collerons en place ici.

47
00:03:22,760 --> 00:03:25,625
Donc, cela devient l'emplacement central à partir duquel

48
00:03:25,625 --> 00:03:30,215
les informations sur la vaisselle sont fournies à votre application.

49
00:03:30,215 --> 00:03:34,610
J'ai maintenant coupé et collé les détails de

50
00:03:34,610 --> 00:03:39,770
le plat qui sont donnés dans les instructions d'exercice en place ici,

51
00:03:39,770 --> 00:03:43,640
et donc j'ai quatre plats collés ici un,

52
00:03:43,640 --> 00:03:46,030
deux trois, et quatre plats collés ici,

53
00:03:46,030 --> 00:03:48,710
et chacun de ces plats contient bien sûr

54
00:03:48,710 --> 00:03:52,560
les détails du plat spécifique et aussi des commentaires pour le plat.

55
00:03:52,560 --> 00:03:55,610
Maintenant, de cette façon, le rendu des informations dans

56
00:03:55,610 --> 00:04:02,360
le modèle de détail du plat devient simple pour n'importe lequel de ces plats choisis.

57
00:04:02,360 --> 00:04:09,130
Maintenant, si vous retournez en arrière, vous verrez qu'il y a quelques lignes rouges ici.

58
00:04:09,130 --> 00:04:16,700
La raison de ces lignes rouges est que lorsque vous regardez l'objet plat ici,

59
00:04:16,700 --> 00:04:23,210
vous verrez que dans l'objet plat nous n'avons pas de propriété appelée comme commentaires.

60
00:04:23,210 --> 00:04:26,060
Donc, nous devons créer une nouvelle propriété appelée

61
00:04:26,060 --> 00:04:30,480
commentaires à ajouter dans ce plat ici. Alors, comment on fait ça ?

62
00:04:30,480 --> 00:04:35,060
Donc, pour ce faire, nous allons dire des commentaires et

63
00:04:35,060 --> 00:04:41,275
puis je dirais tableau de commentaires ici.

64
00:04:41,275 --> 00:04:47,690
Maintenant, vous réalisez immédiatement qu'il n'y a pas de tableau de commentaires disponible pour nous,

65
00:04:47,690 --> 00:04:50,495
donc nous devons créer ce tableau de commentaires.

66
00:04:50,495 --> 00:04:54,605
Donc, ce que je vais faire est que je vais créer une autre classe JavaScript

67
00:04:54,605 --> 00:04:59,090
qui contient les détails du commentaire là-bas.

68
00:04:59,090 --> 00:05:17,340
Donc, pour ce faire, je vais d'abord importer le commentaire de

69
00:05:17,340 --> 00:05:20,750
la classe de commentaire ici.

70
00:05:20,750 --> 00:05:25,435
Maintenant, bien sûr, la ligne rouge me dit immédiatement que je n'ai pas de classe de commentaire.

71
00:05:25,435 --> 00:05:27,375
Alors, comment pouvons-nous ajouter une classe de commentaire ?

72
00:05:27,375 --> 00:05:29,500
Donc, en allant dans le dossier partagé,

73
00:05:29,500 --> 00:05:37,940
nous allons créer un nouveau fichier nommé comment.ts et à l'intérieur de ce commentaire,

74
00:05:37,940 --> 00:05:48,250
nous allons définir une classe appelée commentaire ici.

75
00:05:50,300 --> 00:05:55,695
Maintenant, nous devons définir certaines propriétés pour cette classe de commentaires.

76
00:05:55,695 --> 00:05:57,605
Alors, quelles sont les propriétés que nous avons ?

77
00:05:57,605 --> 00:06:00,890
Jetons un coup d'oeil à notre fichier .ts

78
00:06:00,890 --> 00:06:05,310
et ensuite nous verrons quelles sont les propriétés de chaque commentaire.

79
00:06:06,170 --> 00:06:09,085
En allant dans le fichier dishes.ts,

80
00:06:09,085 --> 00:06:11,555
vous voyez que les commentaires contiennent

81
00:06:11,555 --> 00:06:15,470
une propriété appelée comme une note qui semble être un nombre,

82
00:06:15,470 --> 00:06:18,110
alors vous avez un commentaire qui est une chaîne et

83
00:06:18,110 --> 00:06:21,490
auteur qui est une chaîne et une date qui est aussi une chaîne.

84
00:06:21,490 --> 00:06:26,690
Donc, nous devons définir quatre propriétés pour ma classe de commentaire ici.

85
00:06:26,690 --> 00:06:30,075
Donc, en revenant à la classe de commentaire,

86
00:06:30,075 --> 00:06:34,770
, je définirais la cote comme un nombre.

87
00:06:34,770 --> 00:06:37,410
Donc, dans le script de type,

88
00:06:37,410 --> 00:06:47,575
tout est un nombre ici alors nous avons eu un commentaire qui est un auteur de chaîne,

89
00:06:47,575 --> 00:06:49,480
qui est aussi une chaîne,

90
00:06:49,480 --> 00:06:56,500
et ensuite la date qui est aussi une chaîne ici.

91
00:06:56,500 --> 00:07:01,130
Donc, ce sont les quatre propriétés que nous avons ici.

92
00:07:01,130 --> 00:07:09,620
Maintenant, évidemment, nous avons vu comment nous utilisons la chaîne de date dans l'exercice précédent,

93
00:07:09,620 --> 00:07:13,040
et dans l'affectation comment nous avons utilisé

94
00:07:13,040 --> 00:07:17,410
la chaîne de date pour afficher la date du commentaire là-bas.

95
00:07:17,410 --> 00:07:19,755
Maintenant, au cas où vous vous demandez,

96
00:07:19,755 --> 00:07:22,540
qu'est-ce que cette chaîne de date contient réellement ?

97
00:07:22,540 --> 00:07:28,260
En allant ici, vous verrez que cette chaîne de date est avec un certain format.

98
00:07:28,260 --> 00:07:32,165
Donc, c'est le format standard pour stocker une date ici.

99
00:07:32,165 --> 00:07:38,230
Ce format de date est la façon ISO OSI de spécifier le format de date.

100
00:07:38,230 --> 00:07:39,775
Donc, nous allons juste utiliser ceci,

101
00:07:39,775 --> 00:07:42,670
donc c'est un format standardisé qui est également utilisé dans

102
00:07:42,670 --> 00:07:48,430
de nombreux langages de programmation qui vous permet de stocker les données sous forme de chaîne ici,

103
00:07:48,430 --> 00:07:51,500
donc je vais juste l'utiliser en tant que tel ici.

104
00:07:51,500 --> 00:07:55,405
Après avoir apporté les modifications au fichier

105
00:07:55,405 --> 00:08:02,230
dish.ts comme ceci ici et ensuite ajouté dans la classe de commentaire ici,

106
00:08:02,230 --> 00:08:08,420
nous voyons maintenant que le fichier dishes.ts n'a plus ces lignes rouges car

107
00:08:08,420 --> 00:08:18,325
le commentaire a été ajouté en tant que tableau d'objets à ma classe de plat ici.

108
00:08:18,325 --> 00:08:22,470
Donc, cela fonctionne bien jusqu'à présent.

109
00:08:22,470 --> 00:08:24,530
Maintenant, comment utilisons-nous cela ?

110
00:08:24,530 --> 00:08:25,935
Maintenant, pour en faire usage,

111
00:08:25,935 --> 00:08:28,755
nous allons aller au menu component.ts,

112
00:08:28,755 --> 00:08:32,050
et puis ici nous avons cette constante définie ici.

113
00:08:32,050 --> 00:08:34,760
Maintenant, ce n'est pas la bonne façon de le faire

114
00:08:34,760 --> 00:08:38,845
plus tard, vous me verrez utiliser un service pour tout cela.

115
00:08:38,845 --> 00:08:49,075
Alors, laissez-moi couper complètement cette constante d'ici et au lieu d'utiliser cette constante,

116
00:08:49,075 --> 00:08:54,880
je vais maintenant importer des plats

117
00:08:54,880 --> 00:09:01,600
du dossier partagé

118
00:09:01,600 --> 00:09:07,225
ici, des plats partagés ici.

119
00:09:07,225 --> 00:09:12,875
Donc, notez que ce dossier vaisselle exporte la constante vaisselle ici.

120
00:09:12,875 --> 00:09:17,250
Donc, c'est la raison pour laquelle nous pouvons en faire usage.

121
00:09:17,250 --> 00:09:20,080
Alors, en revenant à la vaisselle un ici,

122
00:09:20,080 --> 00:09:22,600
J'ai besoin d'exporter ça d'ici,

123
00:09:22,600 --> 00:09:25,500
donc je dirais exporter.

124
00:09:25,500 --> 00:09:28,285
Constante. Donc, quand je fais cela,

125
00:09:28,285 --> 00:09:33,985
alors dans mon composant de menu, je peux voir que mes plats peuvent être importés ici correctement.

126
00:09:33,985 --> 00:09:40,150
Ensuite, le reste du code ici fonctionnera très bien sans aucun changement.

127
00:09:40,500 --> 00:09:46,190
Vous verrez que si vous enregistrez les valeurs maintenant

128
00:09:46,190 --> 00:09:51,190
et ensuite vous regardez votre application web dans le navigateur,

129
00:09:51,190 --> 00:09:55,655
il sera très bien rendu même après ces changements.

130
00:09:55,655 --> 00:10:00,110
Après avoir enregistré toutes les modifications que vous avez faites jusqu'à présent dans tous les fichiers,

131
00:10:00,110 --> 00:10:01,810
si vous allez regarder votre page web,

132
00:10:01,810 --> 00:10:05,360
votre page web s'affiche comme avant.

133
00:10:05,360 --> 00:10:09,025
Maintenant, la deuxième partie du problème.

134
00:10:09,025 --> 00:10:11,390
Nous voulons pouvoir communiquer.

135
00:10:11,390 --> 00:10:15,640
Lorsque nous cliquons sur l'un de ces éléments de menu,

136
00:10:15,640 --> 00:10:18,415
nous voulons pouvoir communiquer cette information afin que

137
00:10:18,415 --> 00:10:21,640
le plat correspondant soit rendu ici.

138
00:10:21,640 --> 00:10:23,620
Donc, c'est là que nous allons prendre l'aide de

139
00:10:23,620 --> 00:10:27,100
la liaison de données que nous avons appris jusqu'à présent.

140
00:10:27,100 --> 00:10:33,505
En revenant au fichier de modèle de composants de menu,

141
00:10:33,505 --> 00:10:36,600
ce que nous allons faire est que pour

142
00:10:36,600 --> 00:10:41,675
ce « app-dishdetail » que vous incluez en bas ici,

143
00:10:41,675 --> 00:10:48,570
pour ajouter dans le modèle de composants de détail de plat au modèle de composants de menu,

144
00:10:48,570 --> 00:10:53,440
nous allons ajouter dans une propriété appelée Dish.

145
00:10:53,440 --> 00:10:59,520
Ensuite, nous allons assigner ceci à « SelectedDish ».

146
00:10:59,520 --> 00:11:03,550
Vous vous rappellerez que le plat sélectionné est une variable que nous avons

147
00:11:03,550 --> 00:11:08,385
définie dans nos composants de menu fichier TypeScript ici.

148
00:11:08,385 --> 00:11:15,905
Donc, de cette façon ; cette valeur de ce plat sélectionné sera transmise par ce plat de propriété ici.

149
00:11:15,905 --> 00:11:20,860
Maintenant, nous allons voir comment le composant de détail du plat peut récupérer cette information

150
00:11:20,860 --> 00:11:25,670
et ensuite l'utiliser bien à l'étape suivante de l'exercice.

151
00:11:25,670 --> 00:11:27,655
Maintenant, pendant que nous sommes ici,

152
00:11:27,655 --> 00:11:33,345
nous allons aussi résoudre l'autre problème que nous devons traiter.

153
00:11:33,345 --> 00:11:40,155
Autrement dit, lorsque l'un des éléments de menu est cliqué,

154
00:11:40,155 --> 00:11:44,215
alors il va générer un événement de clic et nous voulons que ces informations soient

155
00:11:44,215 --> 00:11:49,475
livrées à notre fichier TypeScript composant de menu.

156
00:11:49,475 --> 00:11:56,960
Donc, pour ce faire, nous allons entrer dans les listes de grille de menu que nous avons définies ici.

157
00:11:56,960 --> 00:11:59,395
Pour cette grille ici,

158
00:11:59,395 --> 00:12:04,945
ce que je vais faire est de définir l'événement click ici.

159
00:12:04,945 --> 00:12:06,910
Donc, pour l'événement click,

160
00:12:06,910 --> 00:12:11,870
ce que je vais faire est que je vais appeler sur la méthode

161
00:12:11,870 --> 00:12:19,005
select que je vais définir dans mon fichier de menu component.ts.

162
00:12:19,005 --> 00:12:20,880
Pour cette méthode onSelect,

163
00:12:20,880 --> 00:12:25,975
Je vais fournir le plat comme paramètre ici.

164
00:12:25,975 --> 00:12:27,315
Quel est ce plat ?

165
00:12:27,315 --> 00:12:30,670
Ce plat est exactement ce plat que vous avez sélectionné dans

166
00:12:30,670 --> 00:12:35,785
ce « plat de plats » dans la syntaxe ngFor ici.

167
00:12:35,785 --> 00:12:38,290
Donc, ce plat spécifique,

168
00:12:38,290 --> 00:12:41,390
sur le tableau de plats que vous avez sélectionné ici,

169
00:12:41,390 --> 00:12:45,980
sera passé en paramètre à cette méthode onSelect,

170
00:12:45,980 --> 00:12:50,555
ce que nous allons implémenter dans notre fichier de menu component.ts.

171
00:12:50,555 --> 00:12:52,465
Donc, maintenant que nous avons fait cela,

172
00:12:52,465 --> 00:12:56,175
donc c'est le gestionnaire qui doit être implémenté.

173
00:12:56,175 --> 00:12:59,960
Allons au fichier de composant de menu, puis corrigeons

174
00:12:59,960 --> 00:13:04,195
ce fichier pour implémenter ce gestionnaire là-dedans.

175
00:13:04,195 --> 00:13:08,490
Donc, quand vous faites un clic sur l'un des éléments de menu,

176
00:13:08,490 --> 00:13:10,695
alors la poignée correspondante sera appelée et

177
00:13:10,695 --> 00:13:15,605
l'information spécifique du plat sera transmise en paramètre ici.

178
00:13:15,605 --> 00:13:19,790
Aller au fichier component.ts du menu, maintenant,

179
00:13:19,790 --> 00:13:25,545
le plat sélectionné recevra une valeur basée sur le plat que je sélectionne.

180
00:13:25,545 --> 00:13:29,600
Donc, je vais supprimer cette partie et puis juste en bas ici,

181
00:13:29,600 --> 00:13:34,660
je vais implémenter la méthode onSelect ici.

182
00:13:34,660 --> 00:13:37,715
Donc, pour la méthode onSelect,

183
00:13:37,715 --> 00:13:45,525
cela obtiendra un paramètre qui est le paramètre dish.

184
00:13:45,525 --> 00:13:47,820
Quand ce paramètre de plat arrive,

185
00:13:47,820 --> 00:13:55,705
Je vais assigner ce SelectedDish égal à plat,

186
00:13:55,705 --> 00:14:02,420
le paramètre qui est entré comme valeur pour la méthode onSelect ici.

187
00:14:02,420 --> 00:14:03,895
Alors, c'est ça.

188
00:14:03,895 --> 00:14:08,410
Donc, lorsque vous cliquez sur l'un de ces éléments dans le menu,

189
00:14:08,410 --> 00:14:10,780
n'importe quel plat dans le menu,

190
00:14:10,780 --> 00:14:15,090
cette information sur le plat sera transmise à travers ceci et ensuite

191
00:14:15,090 --> 00:14:20,670
le plat sélectionné sera attribué à cet objet plat ici.

192
00:14:20,670 --> 00:14:25,415
Maintenant, nous avons comment l'information vient du DOM.

193
00:14:25,415 --> 00:14:29,280
Le clic spécifique fera en sorte que les informations sur le plat à

194
00:14:29,280 --> 00:14:33,875
soient disponibles pour nous et le plat sélectionné recevra cette valeur.

195
00:14:33,875 --> 00:14:38,755
Maintenant, revenant au fichier HTML du composant de menu,

196
00:14:38,755 --> 00:14:45,240
nous voyons que nous avons déjà attribué cette propriété de plat à SelectedDish.

197
00:14:45,240 --> 00:14:48,730
Donc, de cette façon, cette valeur de plat sélectionnée est passée

198
00:14:48,730 --> 00:14:53,980
via cette propriété de plat à cet app-dishdetail ici.

199
00:14:53,980 --> 00:14:57,990
Maintenant, comment mon composant de détail de plat tient-il de cette information ?

200
00:14:57,990 --> 00:15:02,225
Pour cela, nous allons aller au composant de détail du plat et corriger cela.

201
00:15:02,225 --> 00:15:05,185
Aller au composant de détail de plat,

202
00:15:05,185 --> 00:15:08,395
la première chose que je vais faire est de supprimer

203
00:15:08,395 --> 00:15:13,370
cette constante de plat de mon composant de détail de plat.

204
00:15:13,370 --> 00:15:14,985
Je n'en ai plus besoin.

205
00:15:14,985 --> 00:15:18,490
Maintenant, quand une propriété est liée,

206
00:15:18,490 --> 00:15:22,715
comme ce que nous avons vu dans le fichier HTML du composant de menu,

207
00:15:22,715 --> 00:15:25,900
puis dans mon fichier de détail de plat,

208
00:15:25,900 --> 00:15:32,035
je peux utiliser un autre module appelé Module d'entrée.

209
00:15:32,035 --> 00:15:35,505
Alors, pour ce plat,

210
00:15:35,505 --> 00:15:39,555
, je vais simplement déclarer cela en tant que DISH.

211
00:15:39,555 --> 00:15:45,095
Maintenant, ce module d'entrée me permet de déclarer un décorateur

212
00:15:45,095 --> 00:15:50,905
pour cette variable de plat que j'ai définie ici,

213
00:15:50,905 --> 00:15:57,800
comme ceci, à l'entrée avec la parenthèse ici à ce plat.

214
00:15:57,800 --> 00:16:01,025
Ensuite, aussi, j'ai besoin d'importer

215
00:16:01,025 --> 00:16:10,010
la classe de plat

216
00:16:10,010 --> 00:16:18,975
de plat partagé ici.

217
00:16:18,975 --> 00:16:24,610
Donc, avec cela, donc ce qui s'est passé est que je fais usage du module d'entrée.

218
00:16:24,610 --> 00:16:30,655
Donc, c'est un moyen pour vous de fournir des informations dans un composant à partir d'un autre composant.

219
00:16:30,655 --> 00:16:33,650
Vous liez une propriété dans le modèle de

220
00:16:33,650 --> 00:16:37,460
l'autre composant comme nous l'avons vu dans le fichier de menu component.html,

221
00:16:37,460 --> 00:16:47,070
et ensuite cela sera disponible en entrée à ce composant en déclarant une variable, puis en appelant le décorateur d'entrée pour cela.

222
00:16:47,070 --> 00:16:51,400
Maintenant, avec cela, sauvegardons les modifications apportées à tous les fichiers que nous avons fait

223
00:16:51,400 --> 00:16:56,990
, puis jetez un oeil à la réplication angulaire.

224
00:16:56,990 --> 00:17:00,140
En allant sur notre navigateur,

225
00:17:00,140 --> 00:17:02,260
nous voyons que dans cette réplication angulaire,

226
00:17:02,260 --> 00:17:04,000
rien n'est affiché ici.

227
00:17:04,000 --> 00:17:07,470
Parce que maintenant, le plat sélectionné,

228
00:17:07,470 --> 00:17:11,120
nous n'avons sélectionné aucun des plats donc aussi le plat sélectionné

229
00:17:11,120 --> 00:17:14,985
est un objet vide là-bas.

230
00:17:14,985 --> 00:17:23,050
Donc, nous utilisons le NGif dans le modèle pour le détail du plat.

231
00:17:23,050 --> 00:17:27,765
Donc, en regardant rapidement le modèle de détails du plat,

232
00:17:27,765 --> 00:17:31,810
vous avez implémenté ceci dans le cadre de votre mission.

233
00:17:31,810 --> 00:17:38,315
Donc, vous auriez dû utiliser le NGif avec le plat à la fois pour le code,

234
00:17:38,315 --> 00:17:41,400
ainsi que pour la liste MD là-bas.

235
00:17:41,400 --> 00:17:44,125
Donc, si vous faites cela,

236
00:17:44,125 --> 00:17:47,705
alors quand le plat est actuellement désélectionné,

237
00:17:47,705 --> 00:17:50,175
alors rien ne sera affiché en bas.

238
00:17:50,175 --> 00:17:53,255
Mais au moment où je clique sur l'un des plats,

239
00:17:53,255 --> 00:17:58,005
, puis vous voyez immédiatement les détails du plat affiché en bas ici.

240
00:17:58,005 --> 00:18:00,840
Maintenant, je peux sélectionner le deuxième plat et puis immédiatement,

241
00:18:00,840 --> 00:18:06,000
, vous remarquerez que les détails du plat affichés ci-dessous sont modifiés.

242
00:18:06,000 --> 00:18:09,090
Donc, chaque fois que je clique sur l'un de ces plats,

243
00:18:09,090 --> 00:18:11,505
les détails de ce plat spécifique,

244
00:18:11,505 --> 00:18:15,670
y compris les commentaires seront affichés en bas ici.

245
00:18:15,670 --> 00:18:20,710
Donc, c'est exactement ce que nous voulons réaliser dans cet exercice particulier.

246
00:18:20,710 --> 00:18:27,855
Donc, ici, vous avez vu l'utilisation de la liaison de données, trois types différents,

247
00:18:27,855 --> 00:18:31,970
y compris le gestionnaire d'événement et d'événement,

248
00:18:31,970 --> 00:18:37,110
et aussi vous avez vu comment nous pouvons utiliser le module d'entrée pour pouvoir

249
00:18:37,110 --> 00:18:42,855
pour récupérer des informations dans un composant provenant d'un autre composant.

250
00:18:42,855 --> 00:18:45,820
Avec cela, nous terminons cet exercice,

251
00:18:45,820 --> 00:18:48,750
où nous avons appris à utiliser diverses fonctionnalités de liaison de données

252
00:18:48,750 --> 00:18:56,005
disponibles dans Angular pour implémenter notre application.

253
00:18:56,005 --> 00:19:02,010
C'est le bon moment pour vous de faire un commit git avec la liaison de données de message.