1
00:00:00,000 --> 00:00:07,225
Agora que examinamos a ligação de dados,

2
00:00:07,225 --> 00:00:10,275
vamos fazer uso deles para

3
00:00:10,275 --> 00:00:14,715
trabalhando no aplicativo Angular que temos usado até agora.

4
00:00:14,715 --> 00:00:17,504
Na versão anterior do aplicativo Angular,

5
00:00:17,504 --> 00:00:20,190
tínhamos o menu sendo renderizado,

6
00:00:20,190 --> 00:00:24,655
e então tínhamos um prato específico sendo mostrado na parte inferior.

7
00:00:24,655 --> 00:00:28,770
Agora, gostaríamos que o usuário pudesse clicar em

8
00:00:28,770 --> 00:00:32,990
em qualquer um dos itens do menu e, em seguida, os detalhes a serem mostrados ao usuário.

9
00:00:32,990 --> 00:00:37,325
Aqui é onde o uso de ligação de dados nos ajudará

10
00:00:37,325 --> 00:00:43,430
a implementar nosso aplicativo para habilitar esse tipo de recurso.

11
00:00:43,430 --> 00:00:48,470
Indo para o estado atual da nossa aplicação no navegador,

12
00:00:48,470 --> 00:00:52,040
agora podemos ver que temos o nosso menu e na parte inferior temos

13
00:00:52,040 --> 00:00:56,370
os detalhes de um prato específico sendo mostrado lá.

14
00:00:56,370 --> 00:01:01,625
Agora, isso é bom e bom para começar, mas idealmente,

15
00:01:01,625 --> 00:01:06,350
o que gostaríamos de ter é que se o usuário clicar em qualquer um desses pratos,

16
00:01:06,350 --> 00:01:12,585
nós queremos ser capazes de mostrar os detalhes do prato na parte inferior do menu aqui.

17
00:01:12,585 --> 00:01:17,165
Então, gostaríamos que os detalhes do prato fossem alterados

18
00:01:17,165 --> 00:01:22,250
com base em qual prato específico clicamos em qualquer momento.

19
00:01:22,250 --> 00:01:24,100
Então, como conseguimos isso?

20
00:01:24,100 --> 00:01:28,355
Então, é aqui que o uso de ligação de dados vem para o nosso resgate.

21
00:01:28,355 --> 00:01:31,735
Indo para o nosso aplicativo,

22
00:01:31,735 --> 00:01:35,750
a primeira coisa que eu vou fazer é na pasta compartilhada,

23
00:01:35,750 --> 00:01:39,800
agora você percebe que a informação do prato está sendo

24
00:01:39,800 --> 00:01:45,090
usado tanto no componente do menu como no componente de detalhe do prato.

25
00:01:45,090 --> 00:01:49,100
Agora, quando você tem informações sendo compartilhadas assim,

26
00:01:49,100 --> 00:01:53,120
seria bastante mais conveniente ter um lugar centralizado

27
00:01:53,120 --> 00:01:57,170
a partir do qual esta informação é fornecida para ambos os componentes.

28
00:01:57,170 --> 00:01:58,880
Então, para me ajudar a fazer isso,

29
00:01:58,880 --> 00:02:03,470
o que eu vou fazer é ir para a pasta de compartilhamento e, em seguida, criar um novo arquivo,

30
00:02:03,470 --> 00:02:09,150
e então eu vou nomear este arquivo como dishes.ts.

31
00:02:09,150 --> 00:02:11,540
Dentro deste arquivo dishes.ts,

32
00:02:11,540 --> 00:02:16,840
Eu vou criar a constante que fornece os detalhes dos pratos.

33
00:02:16,840 --> 00:02:17,980
Então, para fazer isso,

34
00:02:17,980 --> 00:02:27,380
Eu importaria primeiro o prato,

35
00:02:27,380 --> 00:02:34,400
da classe de prato

36
00:02:34,400 --> 00:02:36,760
que eu já defini anteriormente.

37
00:02:36,760 --> 00:02:40,625
Então agora, eu posso definir uma constante

38
00:02:40,625 --> 00:02:48,230
chamado como pratos do tipo uma matriz de pratos,

39
00:02:48,230 --> 00:02:53,590
e então é aqui que eu vou armazenar os detalhes de todos os meus pratos.

40
00:02:53,590 --> 00:02:56,495
Agora, na versão anterior do aplicativo,

41
00:02:56,495 --> 00:03:00,500
vimos o uso dos pratos e vimos

42
00:03:00,500 --> 00:03:04,610
a matriz de objetos JavaScript que contém os detalhes dos pratos.

43
00:03:04,610 --> 00:03:09,830
Agora, vamos mover todo esse conteúdo e com uma versão atualizada dele.

44
00:03:09,830 --> 00:03:12,485
Então, uma versão atualizada dos pratos

45
00:03:12,485 --> 00:03:16,520
array de objetos JavaScript é dada a você nas instruções,

46
00:03:16,520 --> 00:03:18,065
então basta ir e copiar

47
00:03:18,065 --> 00:03:22,760
toda a matriz de objetos JavaScript de lá e então vamos colá-lo no lugar aqui.

48
00:03:22,760 --> 00:03:25,625
Então, este se torna o local central a partir do qual

49
00:03:25,625 --> 00:03:30,215
as informações de pratos são fornecidas para a sua aplicação.

50
00:03:30,215 --> 00:03:34,610
Eu tenho agora cortado e colado os detalhes de

51
00:03:34,610 --> 00:03:39,770
o prato que são dadas nas instruções de exercício no lugar aqui,

52
00:03:39,770 --> 00:03:43,640
e assim eu tenho quatro pratos colados aqui um,

53
00:03:43,640 --> 00:03:46,030
dois três, e quatro pratos colados aqui,

54
00:03:46,030 --> 00:03:48,710
e cada um desses pratos contém, claro

55
00:03:48,710 --> 00:03:52,560
os detalhes do prato específico e também comentários para o prato.

56
00:03:52,560 --> 00:03:55,610
Agora, desta forma, renderizar as informações em

57
00:03:55,610 --> 00:04:02,360
o modelo de detalhes do prato torna-se simples para qualquer um desses pratos escolhidos.

58
00:04:02,360 --> 00:04:09,130
Agora, se você reverter você verá que há algumas linhas vermelhas aqui.

59
00:04:09,130 --> 00:04:16,700
A razão para essas linhas vermelhas é porque quando você olha para o objeto prato aqui,

60
00:04:16,700 --> 00:04:23,210
você verá que no objeto prato não temos uma propriedade lá chamada como comentários.

61
00:04:23,210 --> 00:04:26,060
Então, precisamos criar uma nova propriedade chamada

62
00:04:26,060 --> 00:04:30,480
comentários para adicionar a esse prato aqui. Então, como fazemos isso?

63
00:04:30,480 --> 00:04:35,060
Então, para fazer isso, vamos dizer comentários e

64
00:04:35,060 --> 00:04:41,275
então eu diria matriz comentário aqui.

65
00:04:41,275 --> 00:04:47,690
Agora imediatamente você percebe que não há nenhuma matriz de comentários disponível para nós,

66
00:04:47,690 --> 00:04:50,495
então precisamos criar essa matriz de comentários.

67
00:04:50,495 --> 00:04:54,605
Então, o que eu vou fazer é eu vou criar outra classe JavaScript

68
00:04:54,605 --> 00:04:59,090
que contém os detalhes do comentário lá.

69
00:04:59,090 --> 00:05:17,340
Então, para fazer isso, primeiro vou importar comentário de

70
00:05:17,340 --> 00:05:20,750
a classe de comentário aqui.

71
00:05:20,750 --> 00:05:25,435
Agora é claro que a linha vermelha imediatamente me diz que eu não tenho uma aula de comentário.

72
00:05:25,435 --> 00:05:27,375
Então, como adicionamos uma classe de comentário?

73
00:05:27,375 --> 00:05:29,500
Então, indo para a pasta compartilhada,

74
00:05:29,500 --> 00:05:37,940
vamos criar um novo arquivo chamado comment.ts e dentro deste comment.ts,

75
00:05:37,940 --> 00:05:48,250
vamos definir uma classe chamada comentário aqui.

76
00:05:50,300 --> 00:05:55,695
Agora, precisamos definir certas propriedades para esta classe de comentário.

77
00:05:55,695 --> 00:05:57,605
Então, quais são as propriedades que temos?

78
00:05:57,605 --> 00:06:00,890
Vamos dar uma olhada rápida no nosso arquivo dishes.ts

79
00:06:00,890 --> 00:06:05,310
e, em seguida, vamos ver quais são as propriedades para cada comentário.

80
00:06:06,170 --> 00:06:09,085
Indo para o arquivo dishes.ts,

81
00:06:09,085 --> 00:06:11,555
você vê que os comentários contêm

82
00:06:11,555 --> 00:06:15,470
uma propriedade chamada como uma classificação que parece ser um número,

83
00:06:15,470 --> 00:06:18,110
então você tem um comentário que é uma string e

84
00:06:18,110 --> 00:06:21,490
autor que é uma string e uma data que também é uma string.

85
00:06:21,490 --> 00:06:26,690
Então, precisamos definir quatro propriedades para minha classe de comentário aqui.

86
00:06:26,690 --> 00:06:30,075
Então, voltando para a classe de comentário,

87
00:06:30,075 --> 00:06:34,770
Eu definiria classificação como número.

88
00:06:34,770 --> 00:06:37,410
Então, no script tipo,

89
00:06:37,410 --> 00:06:47,575
tudo é um número aqui, então tivemos comentário que é um autor string,

90
00:06:47,575 --> 00:06:49,480
que também é uma string,

91
00:06:49,480 --> 00:06:56,500
e, em seguida, data que também é uma string aqui.

92
00:06:56,500 --> 00:07:01,130
Então, estas são as quatro propriedades que temos aqui.

93
00:07:01,130 --> 00:07:09,620
Agora, obviamente temos visto como usamos a string de data no exercício anterior,

94
00:07:09,620 --> 00:07:13,040
e na atribuição como fizemos uso de

95
00:07:13,040 --> 00:07:17,410
a string de data para mostrar a data para o comentário lá.

96
00:07:17,410 --> 00:07:19,755
Agora, no caso de você estar se perguntando,

97
00:07:19,755 --> 00:07:22,540
o que essa string de data realmente contém?

98
00:07:22,540 --> 00:07:28,260
Indo aqui, você verá que esta string de data está com um determinado formato.

99
00:07:28,260 --> 00:07:32,165
Então, este é o formato padrão para armazenar uma data aqui.

100
00:07:32,165 --> 00:07:38,230
Este formato de data é a forma ISO OSI de especificar o formato de data.

101
00:07:38,230 --> 00:07:39,775
Então, nós vamos apenas usar isso,

102
00:07:39,775 --> 00:07:42,670
então este é um formato padronizado que é usado também em

103
00:07:42,670 --> 00:07:48,430
muitas linguagens de programação que permite armazenar os dados como uma string aqui,

104
00:07:48,430 --> 00:07:51,500
então eu vou apenas fazer uso dele como tal aqui.

105
00:07:51,500 --> 00:07:55,405
Depois de fazer as alterações no arquivo

106
00:07:55,405 --> 00:08:02,230
dish.ts como este aqui e, em seguida, também adicionando na classe de comentário aqui,

107
00:08:02,230 --> 00:08:08,420
agora vemos que o arquivo dishes.ts não tem mais essas linhas vermelhas porque

108
00:08:08,420 --> 00:08:18,325
o comentário foi adicionado como uma matriz de objetos para minha classe de prato aqui.

109
00:08:18,325 --> 00:08:22,470
Então, isso funciona bem até agora.

110
00:08:22,470 --> 00:08:24,530
Agora, como fazemos uso disso?

111
00:08:24,530 --> 00:08:25,935
Agora para fazer uso disso,

112
00:08:25,935 --> 00:08:28,755
vamos para o component.ts menu,

113
00:08:28,755 --> 00:08:32,050
e então aqui temos esta constante definida aqui.

114
00:08:32,050 --> 00:08:34,760
Agora, esta não é a maneira certa de fazê-lo

115
00:08:34,760 --> 00:08:38,845
mais tarde você vai me ver usando um serviço para tudo isso.

116
00:08:38,845 --> 00:08:49,075
Então, deixe-me cortar esta constante a partir daqui completamente e em vez de usar essa constante,

117
00:08:49,075 --> 00:08:54,880
Eu vou agora importar pratos

118
00:08:54,880 --> 00:09:01,600
da pasta compartilhada

119
00:09:01,600 --> 00:09:07,225
aqui, pratos compartilhados aqui.

120
00:09:07,225 --> 00:09:12,875
Então, observe que esta pasta de pratos está exportando a constante de pratos aqui.

121
00:09:12,875 --> 00:09:17,250
Então, essa é a razão pela qual somos capazes de fazer uso dele.

122
00:09:17,250 --> 00:09:20,080
Então voltando para os pratos um aqui,

123
00:09:20,080 --> 00:09:22,600
Eu preciso exportar isso daqui,

124
00:09:22,600 --> 00:09:25,500
então eu diria exportação.

125
00:09:25,500 --> 00:09:28,285
Constante. Então, quando eu faço isso,

126
00:09:28,285 --> 00:09:33,985
então no meu componente de menu eu posso ver que meus pratos podem ser importados aqui corretamente.

127
00:09:33,985 --> 00:09:40,150
Então, o resto do código aqui funcionará bem sem quaisquer alterações.

128
00:09:40,500 --> 00:09:46,190
Você verá que se você salvar os valores agora

129
00:09:46,190 --> 00:09:51,190
e, em seguida, você olhar para o seu aplicativo web no navegador,

130
00:09:51,190 --> 00:09:55,655
ele vai renderizar muito bem mesmo após essas mudanças.

131
00:09:55,655 --> 00:10:00,110
Depois de salvar todas as alterações que você fez até agora em todos os arquivos,

132
00:10:00,110 --> 00:10:01,810
se você ir e olhar para a sua página web,

133
00:10:01,810 --> 00:10:05,360
sua página web renderiza exatamente como antes.

134
00:10:05,360 --> 00:10:09,025
Agora, a segunda parte do problema.

135
00:10:09,025 --> 00:10:11,390
Queremos ser capazes de nos comunicar.

136
00:10:11,390 --> 00:10:15,640
Quando clicamos em qualquer um desses itens de menu,

137
00:10:15,640 --> 00:10:18,415
queremos ser capazes de comunicar essa informação para que

138
00:10:18,415 --> 00:10:21,640
o prato correspondente seja renderizado aqui.

139
00:10:21,640 --> 00:10:23,620
Então, é aqui que vamos ter a ajuda de

140
00:10:23,620 --> 00:10:27,100
a ligação de dados que aprendemos até agora.

141
00:10:27,100 --> 00:10:33,505
Voltando para o arquivo de modelo de componentes de menu,

142
00:10:33,505 --> 00:10:36,600
o que vamos fazer é que para

143
00:10:36,600 --> 00:10:41,675
este “app-dishdetail” que você inclui na parte inferior aqui,

144
00:10:41,675 --> 00:10:48,570
para adicionar no modelo de componentes de detalhe prato para o modelo de componentes de menu,

145
00:10:48,570 --> 00:10:53,440
vamos adicionar em uma propriedade chamada como Dish.

146
00:10:53,440 --> 00:10:59,520
Em seguida, vamos atribuir este para ser “SelectedDish”.

147
00:10:59,520 --> 00:11:03,550
Você vai lembrar que o prato selecionado é uma variável que temos

148
00:11:03,550 --> 00:11:08,385
definido em nosso arquivo TypeScript componentes do menu aqui.

149
00:11:08,385 --> 00:11:12,020
Então, dessa forma; esse valor do prato selecionado vai

150
00:11:12,020 --> 00:11:15,905
ser passado através deste prato de propriedade aqui.

151
00:11:15,905 --> 00:11:20,860
Agora, vamos ver como o componente detalhe prato pode recuperar esta informação

152
00:11:20,860 --> 00:11:25,670
e, em seguida, fazer uso dela bem na próxima etapa do exercício.

153
00:11:25,670 --> 00:11:27,655
Agora, enquanto estamos aqui,

154
00:11:27,655 --> 00:11:33,345
também vamos resolver o outro problema que precisamos lidar.

155
00:11:33,345 --> 00:11:40,155
Ou seja, quando qualquer um dos itens de menu é clicado,

156
00:11:40,155 --> 00:11:44,215
então ele vai gerar um evento de clique e queremos que as informações para ser

157
00:11:44,215 --> 00:11:49,475
entregues ao nosso componente de menu arquivo TypeScript.

158
00:11:49,475 --> 00:11:56,960
Então, para fazer isso, vamos para listas de grade de menu que definimos aqui.

159
00:11:56,960 --> 00:11:59,395
Para este bloco de grade aqui,

160
00:11:59,395 --> 00:12:04,945
o que eu vou fazer é definir o evento clique aqui.

161
00:12:04,945 --> 00:12:06,910
Então, para o evento clique,

162
00:12:06,910 --> 00:12:11,870
o que eu vou fazer é eu vou chamar o método de seleção

163
00:12:11,870 --> 00:12:19,005
que eu vou definir dentro do meu arquivo component.ts menu.

164
00:12:19,005 --> 00:12:20,880
Para este método OnSelect,

165
00:12:20,880 --> 00:12:25,975
Eu vou fornecer o prato como o parâmetro aqui.

166
00:12:25,975 --> 00:12:27,315
O que é este prato?

167
00:12:27,315 --> 00:12:30,670
Este prato é exatamente este prato que você selecionou em

168
00:12:30,670 --> 00:12:35,785
este “deixe prato de pratos” na sintaxe NGFor aqui.

169
00:12:35,785 --> 00:12:38,290
Então, esse prato específico,

170
00:12:38,290 --> 00:12:41,390
fora da matriz de pratos que você selecionou aqui,

171
00:12:41,390 --> 00:12:45,980
será passado como um parâmetro para este método OnSelect,

172
00:12:45,980 --> 00:12:50,555
o que vamos implementar em nosso arquivo component.ts de menu.

173
00:12:50,555 --> 00:12:52,465
Então, agora que fizemos isso,

174
00:12:52,465 --> 00:12:56,175
então este é o manipulador que precisa ser implementado.

175
00:12:56,175 --> 00:12:59,960
Vamos para o arquivo componente de menu e, em seguida, corrigir

176
00:12:59,960 --> 00:13:04,195
este arquivo para implementar este manipulador lá.

177
00:13:04,195 --> 00:13:08,490
Assim, quando você fizer um clique em qualquer um dos itens do menu,

178
00:13:08,490 --> 00:13:10,695
então o identificador correspondente será chamado e

179
00:13:10,695 --> 00:13:15,605
a informação específica do prato será passada como um parâmetro aqui.

180
00:13:15,605 --> 00:13:19,790
Indo para o arquivo component.ts do menu, agora,

181
00:13:19,790 --> 00:13:25,545
o prato selecionado será atribuído um valor baseado em qual prato eu selecionar.

182
00:13:25,545 --> 00:13:29,600
Então, eu vou remover essa parte e, em seguida, logo abaixo aqui,

183
00:13:29,600 --> 00:13:34,660
Vou implementar o método onSelect aqui.

184
00:13:34,660 --> 00:13:37,715
Então, para o método onSelect,

185
00:13:37,715 --> 00:13:45,525
isso obterá um parâmetro que é o parâmetro dish.

186
00:13:45,525 --> 00:13:47,820
Quando esse parâmetro de prato entrar,

187
00:13:47,820 --> 00:13:55,705
Eu vou atribuir este SelectedDish igual a prato,

188
00:13:55,705 --> 00:14:02,420
o parâmetro que veio como o valor para o método onSelect aqui.

189
00:14:02,420 --> 00:14:03,895
Então, é isso.

190
00:14:03,895 --> 00:14:08,410
Então, quando você clicar em qualquer um desses itens no menu,

191
00:14:08,410 --> 00:14:10,780
qualquer um dos pratos no menu,

192
00:14:10,780 --> 00:14:15,090
essa informação do prato será passada através disso e, em seguida,

193
00:14:15,090 --> 00:14:20,670
o prato selecionado será atribuído a esse objeto prato aqui.

194
00:14:20,670 --> 00:14:25,415
Agora, temos como a informação vem do DOM.

195
00:14:25,415 --> 00:14:29,280
O clique específico fará com que a informação do prato

196
00:14:29,280 --> 00:14:33,875
esteja disponível para nós e o prato selecionado será atribuído esse valor.

197
00:14:33,875 --> 00:14:38,755
Agora, voltando para o componente de menu arquivo HTML,

198
00:14:38,755 --> 00:14:45,240
vemos que já atribuímos esta propriedade dish para SelectedDish.

199
00:14:45,240 --> 00:14:48,730
Então, dessa forma, esse valor de prato selecionado está sendo passado

200
00:14:48,730 --> 00:14:53,980
através desta propriedade dish para este app-dishdetail aqui.

201
00:14:53,980 --> 00:14:57,990
Agora, como meu componente detalhe prato se apossar dessa informação?

202
00:14:57,990 --> 00:15:02,225
Para isso, vamos para o componente detalhe prato e corrigir isso.

203
00:15:02,225 --> 00:15:05,185
Indo para o componente detalhe prato,

204
00:15:05,185 --> 00:15:08,395
a primeira coisa que eu vou fazer é excluir

205
00:15:08,395 --> 00:15:13,370
esta constante prato do meu componente detalhe prato.

206
00:15:13,370 --> 00:15:14,985
Eu não preciso mais dele.

207
00:15:14,985 --> 00:15:18,490
Agora, quando uma propriedade está sendo vinculada,

208
00:15:18,490 --> 00:15:22,715
como o que vimos no componente de menu arquivo HTML,

209
00:15:22,715 --> 00:15:25,900
então no meu arquivo de detalhe prato,

210
00:15:25,900 --> 00:15:32,035
Eu posso usar outro módulo chamado como o módulo de entrada.

211
00:15:32,035 --> 00:15:35,505
Então, para este prato,

212
00:15:35,505 --> 00:15:39,555
Eu vou simplesmente declarar isso como DISH.

213
00:15:39,555 --> 00:15:45,095
Agora, este módulo de entrada me permite declarar um decorador

214
00:15:45,095 --> 00:15:50,905
para esta variável prato que eu defini aqui,

215
00:15:50,905 --> 00:15:57,800
como este, na entrada com o parêntese aqui para aquele prato aqui.

216
00:15:57,800 --> 00:16:01,025
Então, também, Eu preciso importar

217
00:16:01,025 --> 00:16:10,010
a classe de prato

218
00:16:10,010 --> 00:16:18,975
do prato compartilhado aqui.

219
00:16:18,975 --> 00:16:24,610
Então, com isso, então o que aconteceu é que eu estou fazendo uso do módulo de entrada.

220
00:16:24,610 --> 00:16:30,655
Então, esta é uma maneira de você fornecer informações em um componente de outro componente.

221
00:16:30,655 --> 00:16:33,650
Você vincula uma propriedade no modelo de

222
00:16:33,650 --> 00:16:37,460
o outro componente como vimos no arquivo component.html do menu,

223
00:16:37,460 --> 00:16:41,550
e, em seguida, que estará disponível como entrada para este componente por

224
00:16:41,550 --> 00:16:47,070
declarando uma variável e, em seguida, chamando decorador de entrada para isso.

225
00:16:47,070 --> 00:16:51,400
Agora, com isso, vamos salvar as alterações em todos os arquivos que fizemos

226
00:16:51,400 --> 00:16:56,990
e, em seguida, dar uma olhada na replicação angular.

227
00:16:56,990 --> 00:17:00,140
Indo para o nosso navegador,

228
00:17:00,140 --> 00:17:02,260
vemos que nesta replicação angular,

229
00:17:02,260 --> 00:17:04,000
nada está sendo exibido aqui.

230
00:17:04,000 --> 00:17:07,470
Porque agora, o prato selecionado,

231
00:17:07,470 --> 00:17:11,120
nós não selecionamos nenhum dos pratos assim também o prato selecionado

232
00:17:11,120 --> 00:17:14,985
é um objeto vazio lá.

233
00:17:14,985 --> 00:17:23,050
Então, usamos o nGif no modelo para o detalhe do prato.

234
00:17:23,050 --> 00:17:27,765
Então, dando uma olhada rápida no modelo de detalhes do prato,

235
00:17:27,765 --> 00:17:31,810
você implementou isso como parte de sua tarefa.

236
00:17:31,810 --> 00:17:38,315
Então, você deve ter usado o nGiF com o prato tanto para o código,

237
00:17:38,315 --> 00:17:41,400
como para a lista MD lá.

238
00:17:41,400 --> 00:17:44,125
Então, se você fizer isso,

239
00:17:44,125 --> 00:17:47,705
então, quando o prato estiver atualmente desselecionado,

240
00:17:47,705 --> 00:17:50,175
então nada será exibido na parte inferior.

241
00:17:50,175 --> 00:17:53,255
Mas no momento em que eu clicar em qualquer um dos pratos,

242
00:17:53,255 --> 00:17:58,005
então você imediatamente ver os detalhes do prato sendo exibido na parte inferior aqui.

243
00:17:58,005 --> 00:18:00,840
Agora eu posso selecionar o segundo prato e, em seguida, imediatamente,

244
00:18:00,840 --> 00:18:06,000
você vai notar que os detalhes do prato sendo exibido abaixo é alterado.

245
00:18:06,000 --> 00:18:09,090
Então, sempre que eu clicar em qualquer um desses pratos,

246
00:18:09,090 --> 00:18:11,505
os detalhes desse prato específico,

247
00:18:11,505 --> 00:18:15,670
incluindo os comentários serão exibidos na parte inferior aqui.

248
00:18:15,670 --> 00:18:20,710
Então, isso é exatamente o que queremos alcançar neste exercício específico.

249
00:18:20,710 --> 00:18:27,855
Então, aqui, você viu o uso de ligação de dados, três tipos diferentes,

250
00:18:27,855 --> 00:18:31,970
incluindo o manipulador de eventos e eventos,

251
00:18:31,970 --> 00:18:37,110
e também você viu como podemos fazer uso do módulo de entrada para ser capaz

252
00:18:37,110 --> 00:18:42,855
para recuperar informações em um componente vindo de outro componente.

253
00:18:42,855 --> 00:18:45,820
Com isso, concluímos este exercício,

254
00:18:45,820 --> 00:18:48,750
onde aprendemos a fazer uso de vários dados

255
00:18:48,750 --> 00:18:56,005
recursos de ligação disponíveis no Angular para implementar nossa aplicação.

256
00:18:56,005 --> 00:19:02,010
Este é um bom momento para você fazer um commit git com a ligação de dados de mensagem.