1
00:00:03,650 --> 00:00:11,280
Thời gian để tiếp tục với bài tập tiếp theo của chúng tôi, nơi chúng tôi sẽ kiểm tra các thành phần một lần nữa.

2
00:00:11,280 --> 00:00:15,600
Chúng tôi sẽ sửa đổi mẫu cho

3
00:00:15,600 --> 00:00:20,670
thành phần menu mà chúng tôi đã đưa vào ứng dụng Angular của chúng tôi

4
00:00:20,670 --> 00:00:30,580
bằng cách sử dụng một loại thành phần vật liệu mới để bố trí menu của chúng tôi theo một cách khác.

5
00:00:30,580 --> 00:00:36,625
Trên đường đi, chúng ta cũng sẽ xem xét việc sử dụng chỉ thị cấu trúc NGIf.

6
00:00:36,625 --> 00:00:40,790
Đi đến tập tin mẫu của thành phần menu của chúng

7
00:00:40,790 --> 00:00:44,685
tôi, tôi sẽ thực hiện một số thay đổi đối với tập tin mẫu này.

8
00:00:44,685 --> 00:00:47,900
Đầu tiên, tôi sẽ thêm vào một div ở đây

9
00:00:47,900 --> 00:00:56,170
với FXFlex và sau đó đóng div đó ở đó.

10
00:00:56,170 --> 00:01:01,245
Vì vậy, chú ý rằng bây giờ bên trong div bên ngoài của

11
00:01:01,245 --> 00:01:03,050
tôi, Tôi có hai divs đây.

12
00:01:03,050 --> 00:01:07,855
Vì vậy, một với div và một trong những thứ hai với danh sách trống.

13
00:01:07,855 --> 00:01:15,880
Vì vậy, đây là hai phần nội dung cần được đặt ra trên màn hình.

14
00:01:15,880 --> 00:01:19,450
Nhưng lưu ý rằng tôi đã chỉ định FXLayout được tô màu.

15
00:01:19,450 --> 00:01:21,590
Vì vậy, có nghĩa là, hai phần

16
00:01:21,590 --> 00:01:24,445
nội dung này sẽ được đặt ra một trên đầu trang của nhau,

17
00:01:24,445 --> 00:01:27,025
xếp chồng lên nhau một trên đầu trang của nhau.

18
00:01:27,025 --> 00:01:29,370
Vì vậy, trong div đầu tiên,

19
00:01:29,370 --> 00:01:32,330
tôi sẽ bao gồm một chút nội dung ở đây.

20
00:01:32,330 --> 00:01:38,570
Vì vậy, tôi sẽ đặt một div bên trong đây.

21
00:01:38,570 --> 00:01:42,005
Sau đó, tôi sẽ thêm nhiều vào div này.

22
00:01:42,005 --> 00:01:50,625
Nhưng đối với thời điểm này, tôi sẽ chỉ có một h3 với mục menu ở đó,

23
00:01:50,625 --> 00:01:56,875
và sau đó thêm một phần tử đường ngang vào menu này.

24
00:01:56,875 --> 00:02:02,780
Vì vậy, điều này sẽ cung cấp cho tiêu đề cho

25
00:02:02,780 --> 00:02:08,900
trang đặc biệt này ngay trên đầu trang trong ứng dụng của tôi khi nó được render.

26
00:02:08,900 --> 00:02:12,395
Vì vậy, đó là một sửa đổi.

27
00:02:12,395 --> 00:02:14,070
Bây giờ cho phần thứ hai,

28
00:02:14,070 --> 00:02:16,435
thay vì sử dụng mat-list-item,

29
00:02:16,435 --> 00:02:21,830
bây giờ tôi sẽ lấy sự giúp đỡ của một mat-lưới danh sách.

30
00:02:21,830 --> 00:02:26,000
Mat-lưới danh sách cho phép tôi bố trí nội dung dưới dạng

31
00:02:26,000 --> 00:02:30,625
lưới các mục chứ không phải là danh sách các mục.

32
00:02:30,625 --> 00:02:38,220
Chúng tôi đã thấy cách trình đơn được đặt ra với danh sách các mục trong bài tập trước đó.

33
00:02:38,220 --> 00:02:41,810
Bây giờ, tôi muốn bố trí cùng một menu theo một cách khác một

34
00:02:41,810 --> 00:02:45,615
chút bố trí hấp dẫn hơn cho menu.

35
00:02:45,615 --> 00:02:48,140
Vì vậy, thay vì sử dụng danh sách mat-list,

36
00:02:48,140 --> 00:02:52,520
bây giờ tôi sẽ thay đổi điều này từ mat-list để một mat-grid-list.

37
00:02:52,520 --> 00:02:54,005
Vì vậy, trước khi tôi làm điều đó,

38
00:02:54,005 --> 00:03:03,645
tôi cũng sẽ kèm theo này bên trong một div mà tôi sẽ áp dụng FXFlex ở đây,

39
00:03:03,645 --> 00:03:10,320
do đó mat-lưới danh sách là trong riêng của mình có.

40
00:03:10,320 --> 00:03:14,540
Vì vậy, điều đó sẽ cho tôi linh hoạt hơn

41
00:03:14,540 --> 00:03:19,180
để thêm các mục vào đơn vị đặc biệt này nếu tôi cần sau này.

42
00:03:19,180 --> 00:03:23,505
Danh sách lưới bây giờ có một tham số được gọi là

43
00:03:23,505 --> 00:03:28,450
cột xác định bao nhiêu cột lưới này nên chứa.

44
00:03:28,450 --> 00:03:35,540
Ngay bây giờ tôi sẽ chỉ định các cột là hai bởi vì tôi chỉ có bốn mục trong menu của tôi.

45
00:03:35,540 --> 00:03:37,290
Vì vậy, hai cột là đủ.

46
00:03:37,290 --> 00:03:41,995
Vì vậy, ít nhất tôi có hai hàng của lưới điện ở đó.

47
00:03:41,995 --> 00:03:45,770
Ngoài ra, điều này có một tham số khác được

48
00:03:45,770 --> 00:03:50,010
gọi là RowhEight hoặc một thuộc tính được gọi là RowhEight,

49
00:03:50,010 --> 00:03:56,650
mà tôi sẽ chỉ định là 200 pixel ở đây.

50
00:03:56,680 --> 00:04:03,630
Vì vậy, đó sẽ hoàn thành mat-lưới danh sách mà tôi có bên trong div có.

51
00:04:03,630 --> 00:04:09,120
Bây giờ, một khi tôi thực hiện sự thay đổi, sau đó bên

52
00:04:09,120 --> 00:04:12,700
trong nó, tôi sẽ đi vào và sử dụng,

53
00:04:12,700 --> 00:04:15,045
thay vì danh sách mat-list,

54
00:04:15,045 --> 00:04:20,450
bây giờ nó sẽ là một mat-grid-tile ở đây.

55
00:04:20,450 --> 00:04:22,480
Vì vậy, ngói lưới.

56
00:04:22,480 --> 00:04:24,580
Về cơ bản, gạch của lưới điện.

57
00:04:24,580 --> 00:04:27,350
Ngói lưới này, như bạn nhận ra,

58
00:04:27,350 --> 00:04:31,200
tôi sẽ lặp lại danh sách các món ăn.

59
00:04:31,200 --> 00:04:35,090
Vì vậy, tôi vẫn đang sử dụng chỉ thị ngFor của tôi với nó.

60
00:04:35,090 --> 00:04:38,510
Đây mat-lưới gạch bây giờ sẽ kèm theo

61
00:04:38,510 --> 00:04:43,095
nội dung sẽ được đặt ra trong mỗi ngói của lưới điện của tôi ở đây.

62
00:04:43,095 --> 00:04:45,320
Bây giờ, bên trong gạch,

63
00:04:45,320 --> 00:04:49,105
tôi sẽ sử dụng hình ảnh như nó tồn tại.

64
00:04:49,105 --> 00:04:53,990
Nhưng tôi sẽ sử dụng hình ảnh,

65
00:04:53,990 --> 00:04:58,750
không phải với MatlistaVatar bởi vì điều đó không thể được áp dụng ở đây, và thay vào đó,

66
00:04:58,750 --> 00:05:04,720
tôi sẽ chỉ định chiều cao cho hình ảnh là 200 pixel.

67
00:05:04,720 --> 00:05:09,230
Vì vậy, điều này phù hợp với chiều cao hàng để hình ảnh của tôi sẽ kéo dài

68
00:05:09,230 --> 00:05:14,325
toàn bộ chiều cao của gạch của tôi ở đó.

69
00:05:14,325 --> 00:05:16,830
Vì vậy, chiều cao hình ảnh, 200 pixel,

70
00:05:16,830 --> 00:05:20,190
và nguồn và alt sẽ vẫn như vậy.

71
00:05:20,190 --> 00:05:22,745
Sau đó, phần tiếp theo,

72
00:05:22,745 --> 00:05:24,830
thay vì h1,

73
00:05:24,830 --> 00:05:27,110
tôi sẽ thay đổi cái này

74
00:05:27,110 --> 00:05:33,880
để được

75
00:05:33,880 --> 00:05:39,710
kèm theo bên trong mat-grid-tile-footer.

76
00:05:41,780 --> 00:05:49,770
Vì vậy, bất cứ nội dung nào bên trong ở đây sẽ xuất hiện bên trong mat-grid-tile-footer ở đây.

77
00:05:49,770 --> 00:05:54,035
Bây giờ, bên trong đó tôi có thể xác định bất cứ nội dung nào tôi muốn.

78
00:05:54,035 --> 00:05:57,295
Vì vậy, đối với ngói lưới,

79
00:05:57,295 --> 00:06:00,170
đưa ra mô tả đầy đủ là một chút quá nhiều.

80
00:06:00,170 --> 00:06:02,245
Vì vậy, tôi sẽ loại bỏ mô tả này,

81
00:06:02,245 --> 00:06:05,765
và thay vào đó, chỉ sử dụng h1 ở đó.

82
00:06:05,765 --> 00:06:12,355
Bây giờ, ngoài ra, tôi sẽ lấy sự giúp đỡ của một đường ống góc ở đây.

83
00:06:12,355 --> 00:06:16,340
Các đường ống mà tôi sẽ áp dụng cho điều này, như bạn có thể thấy,

84
00:06:16,340 --> 00:06:22,095
đường ống là thanh dọc trên bàn phím của bạn.

85
00:06:22,095 --> 00:06:25,440
Sau đó, tôi sẽ sử dụng ống chữ hoa.

86
00:06:25,440 --> 00:06:27,175
Vì vậy, ống dẫn này làm gì?

87
00:06:27,175 --> 00:06:32,795
Ống này, ống chữ hoa sẽ biến đổi tên món ăn từ

88
00:06:32,795 --> 00:06:39,015
bất cứ điều gì nó là thành toàn bộ từ với chữ hoa.

89
00:06:39,015 --> 00:06:42,215
Vì vậy, bất cứ điều gì tên món ăn sẽ được hiển thị như

90
00:06:42,215 --> 00:06:49,280
chữ hoa hoàn toàn khi nó được hiển thị vào mẫu đó.

91
00:06:49,280 --> 00:06:52,800
Vì vậy, đó là việc sử dụng một đường ống góc cạnh ở đây.

92
00:06:52,800 --> 00:06:56,870
Vì vậy, chúng ta sẽ sử dụng nhiều ống góc hơn khi chúng ta đi cùng.

93
00:06:56,870 --> 00:07:05,205
Đây là cuộc gặp gỡ đầu tiên của chúng tôi với một trong những đường ống góc được xây dựng trong khóa học này.

94
00:07:05,205 --> 00:07:10,400
Vì vậy, với điều này, bây giờ chúng tôi đã sửa đổi bố trí của chúng tôi

95
00:07:10,400 --> 00:07:15,670
để hiển thị div này ở đây và sau đó danh sách lưới này ở đây.

96
00:07:15,670 --> 00:07:17,240
Hãy lưu các thay đổi.

97
00:07:17,240 --> 00:07:21,070
Đi bây giờ đến tập tin app.module.t,

98
00:07:21,070 --> 00:07:24,640
chúng ta cần nhập MatgridListModule trong đó.

99
00:07:24,640 --> 00:07:27,660
Vì vậy, đi đến trên cùng có, chúng ta sẽ nói,

100
00:07:27,660 --> 00:07:36,490
“Nhập MatgridListModule từ góc độ/vật lước/danh sách.”

101
00:07:39,260 --> 00:07:42,055
Một khi chúng tôi đã thêm điều này,

102
00:07:42,055 --> 00:07:45,925
sau đó chúng tôi sẽ đi xuống nhập khẩu trong trang trí,

103
00:07:45,925 --> 00:07:53,210
và sau đó bao gồm MatGridListModule vào các đầu vào.

104
00:07:53,210 --> 00:07:55,830
Hãy, một lần nữa, lưu các thay đổi.

105
00:07:55,830 --> 00:08:01,650
Chúng ta hãy đi và xem nhanh trang web của chúng tôi và nó trông như thế nào trên màn hình. Vào

106
00:08:01,650 --> 00:08:03,730
trang web của chúng tôi,

107
00:08:03,730 --> 00:08:09,125
bây giờ bạn có thể thấy rằng thực đơn của bạn bây giờ được bố trí theo một cách khác.

108
00:08:09,125 --> 00:08:13,590
Mặc dù, nó không phải là thực sự tuyệt vời nhìn vào thời điểm này.

109
00:08:13,590 --> 00:08:15,230
Tôi không phải là nhà thiết kế,

110
00:08:15,230 --> 00:08:18,880
vì vậy đó là điều tốt nhất mà tôi có thể nhận được từ nó.

111
00:08:18,880 --> 00:08:22,330
Bây giờ, nếu tôi có 20 mục trong menu của tôi,

112
00:08:22,330 --> 00:08:27,110
sau đó tôi có thể đặt ra nhiều mục trên mỗi hàng và nhiều cột,

113
00:08:27,110 --> 00:08:31,860
và sau đó tôi có thể nén không gian mà mỗi mục chiếm,

114
00:08:31,860 --> 00:08:35,660
hoặc tôi có thể tăng kích thước của hình ảnh để nó

115
00:08:35,660 --> 00:08:40,245
chiếm toàn bộ điều cho đến khi nó sẽ trông hấp dẫn hơn nhiều trên màn hình.

116
00:08:40,245 --> 00:08:49,185
Bây giờ, chúng ta hãy nhìn vào điều tương tự này khi nó được xem trong màn hình của một thiết bị nhỏ hơn.

117
00:08:49,185 --> 00:08:52,400
Vì vậy, đây là nơi tôi sẽ lấy sự trợ giúp của các

118
00:08:52,400 --> 00:08:57,990
tùy chọn nhà phát triển trong trình duyệt Chrome của tôi.

119
00:08:57,990 --> 00:09:01,175
Vì vậy, tôi sẽ bắt đầu từ các công cụ phát triển ở đây.

120
00:09:01,175 --> 00:09:04,330
Khi tôi có các công cụ phát triển ở đây,

121
00:09:04,330 --> 00:09:08,340
bạn có thể thấy nút này ở đây nói, “Chuyển đổi thanh công cụ thiết bị.”

122
00:09:08,340 --> 00:09:10,070
Vì vậy, để tôi quay lại.

123
00:09:10,070 --> 00:09:16,180
Sau đó, bạn có thể thấy cùng một trang được hiển thị trên các kích cỡ màn hình khác nhau.

124
00:09:16,180 --> 00:09:23,210
Vì vậy, ở đây, bạn thấy trang được hiển thị trong một Galaxy S5,

125
00:09:23,210 --> 00:09:27,030
và sau đó cùng một điều

126
00:09:28,090 --> 00:09:34,435
bạn có thể thấy nó được hiển thị trong chế độ phong cảnh.

127
00:09:34,435 --> 00:09:39,110
Vì vậy, bạn có thể thấy rằng điều này cho phép tôi xem cùng một trang

128
00:09:39,110 --> 00:09:44,490
trên các kích thước màn hình khác nhau bằng cách sử dụng các công cụ phát triển tích hợp trong Android.

129
00:09:44,490 --> 00:09:48,755
Vì vậy, chúng ta hãy xem nó trông như thế nào trên iPhone.

130
00:09:48,755 --> 00:09:51,815
Thực đơn trông hấp dẫn hơn nhiều ở đây.

131
00:09:51,815 --> 00:09:55,220
Đây là những gì tôi muốn đạt được trên màn hình.

132
00:09:55,220 --> 00:10:02,155
Nếu hình ảnh của tôi có kích thước lớn hơn nhiều ngay cả trên màn hình độ phân giải cao hơn,

133
00:10:02,155 --> 00:10:06,045
trình đơn sẽ trông như thế này.

134
00:10:06,045 --> 00:10:11,205
Trong chế độ phong cảnh, đây là những gì nó sẽ trông như thế nào.

135
00:10:11,205 --> 00:10:15,045
Bây giờ, hãy lưu ý các công cụ nhà phát triển này trong Chrome.

136
00:10:15,045 --> 00:10:21,790
Chúng tôi sẽ sử dụng các công cụ phát triển sau này khi chúng tôi sử dụng Angular

137
00:10:21,790 --> 00:10:25,340
chi tiết hơn bởi vì chúng tôi có thể kiểm tra những thứ như những gì Angular

138
00:10:25,340 --> 00:10:30,180
có thể in cho chúng tôi trên giao diện điều khiển.

139
00:10:30,180 --> 00:10:36,650
Sau đó, chúng tôi thậm chí có thể kiểm tra như thế nào các phần khác nhau của ứng dụng của chúng tôi đang được lấy.

140
00:10:36,650 --> 00:10:40,440
Chúng ta có thể xem xét hiệu suất mạng của ứng dụng của chúng tôi, v.v.

141
00:10:40,440 --> 00:10:45,110
Vì vậy, đó là nơi mà các công cụ phát triển bổ sung là rất,

142
00:10:45,110 --> 00:10:47,270
rất hữu ích cho chúng tôi.

143
00:10:47,270 --> 00:10:51,100
Chuyển về cách bình thường,

144
00:10:51,100 --> 00:10:56,790
đây là trang web của chúng tôi trông như thế nào trên trình duyệt máy tính để bàn chuẩn.

145
00:10:56,790 --> 00:10:58,545
Chúng ta vẫn chưa xong.

146
00:10:58,545 --> 00:11:02,955
Hãy quay trở lại các thành phần menu.

147
00:11:02,955 --> 00:11:07,200
Typescript tập tin và sau đó món ăn này mà tôi đã

148
00:11:07,200 --> 00:11:11,765
định nghĩa ở đây thay vì giữ điều này bên trong lớp của tôi,

149
00:11:11,765 --> 00:11:18,060
Tôi sẽ di chuyển món ăn này vào một hằng số mà tôi

150
00:11:18,060 --> 00:11:25,670
sẽ xác định ngay trên đó và chúng tôi sẽ đặt tên nó như món ăn const,

151
00:11:25,860 --> 00:11:31,370
và điều này sẽ là loại món ăn một mảng,

152
00:11:31,370 --> 00:11:38,825
và sau đó tôi sẽ cắt toàn bộ các món ăn từ đây và sau đó di chuyển nó lên đó.

153
00:11:38,825 --> 00:11:43,450
Điều này là

154
00:11:43,450 --> 00:11:50,050
để chuẩn bị cho một bài tập trong tương lai, nơi chúng tôi sẽ không bao gồm loại dữ liệu này trong ứng dụng của chúng tôi,

155
00:11:50,050 --> 00:11:59,950
nhưng thay vào đó chúng tôi sẽ di chuyển điều này vào một dịch vụ.

156
00:11:59,950 --> 00:12:05,260
Vì vậy, những gì tôi đã làm là cắt thông tin món ăn và

157
00:12:05,260 --> 00:12:11,405
sau đó đặt nó vào một hằng số ở đây với các món ăn tên trong tất cả các thủ đô ở đây,

158
00:12:11,405 --> 00:12:16,100
và sau đó bây giờ món ăn của tôi được để lại như một đứa trẻ mồ côi ở đây.

159
00:12:16,100 --> 00:12:26,275
Vì vậy, điều này tôi sẽ làm cho nó tương đương với các món ăn ở đây.

160
00:12:26,275 --> 00:12:31,165
Bây giờ, các bạn phải tự hỏi tại sao tôi đã loại bỏ các loại cho các món ăn.

161
00:12:31,165 --> 00:12:35,125
TypeScript đủ thông minh để nhận ra rằng khi bạn làm điều này,

162
00:12:35,125 --> 00:12:40,360
nó sẽ tự động gán loại cho các món ăn để phù hợp với những gì bạn có trong các món ăn.

163
00:12:40,360 --> 00:12:44,195
Vì vậy, ngay cả khi bạn không gõ nó trong TypeScript sẽ làm điều đó,

164
00:12:44,195 --> 00:12:47,350
nhưng nếu bạn muốn hoàn toàn rõ ràng bạn

165
00:12:47,350 --> 00:12:50,925
có thể làm điều này quá và điều đó sẽ làm việc tốt.

166
00:12:50,925 --> 00:12:53,920
Được rồi, nếu bạn thích điều này sẽ để nó như vậy.

167
00:12:53,920 --> 00:13:01,795
Bây giờ, ngoài ra, tôi sẽ giới thiệu thêm một biến ở đây gọi là SelectedDish.

168
00:13:01,795 --> 00:13:08,665
Biến này tôi sẽ sử dụng trong bài tập này và một trong những bài tập sau này cũng.

169
00:13:08,665 --> 00:13:17,875
Vì vậy, tôi sẽ làm cho điều này bằng với món ăn đầu tiên trong mảng của tôi.

170
00:13:17,875 --> 00:13:24,730
Bây giờ, món ăn được lựa chọn này sẽ hữu ích cho phần tiếp theo của bài tập này.

171
00:13:24,730 --> 00:13:29,265
Vì vậy, chúng ta hãy lưu các thay đổi và sau đó di chuyển trở lại mẫu của chúng tôi.

172
00:13:29,265 --> 00:13:33,460
Trong mẫu, những gì tôi sẽ làm là ngay bên dưới menu,

173
00:13:33,460 --> 00:13:39,825
tôi sẽ sử dụng một phần tử thẻ từ vật liệu góc để

174
00:13:39,825 --> 00:13:46,555
hiển thị này được lựa chọn Dish ngay bên dưới menu ở đó.

175
00:13:46,555 --> 00:13:50,700
Bây giờ, mặc dù đây không phải là cách tốt nhất để làm điều đó,

176
00:13:50,700 --> 00:13:57,720
nhưng điều này tôi đang làm để chuẩn bị cho bài tập tiếp theo chỉ để

177
00:13:57,720 --> 00:14:04,920
minh họa cho bạn làm thế nào một yếu tố thẻ vật liệu có thể được sử dụng cho ứng dụng của chúng tôi.

178
00:14:04,920 --> 00:14:09,330
Vì vậy, tôi sẽ sử dụng một div với một flex fx ở đây,

179
00:14:09,330 --> 00:14:12,710
và sau đó để div này tôi sẽ thêm vào

180
00:14:12,710 --> 00:14:22,565
một NGIf với SelectedDish.

181
00:14:22,565 --> 00:14:28,045
Vì vậy, lưu ý rằng tôi đang áp dụng một NGIf để div này ở đây để

182
00:14:28,045 --> 00:14:33,330
xác định rằng nếu SelectedDish hiện là null,

183
00:14:33,330 --> 00:14:37,535
sau đó tôi sẽ không thêm div này vào dom.

184
00:14:37,535 --> 00:14:38,920
Nếu nó không phải là,

185
00:14:38,920 --> 00:14:42,050
sau đó div này sẽ được thêm vào dom,

186
00:14:42,050 --> 00:14:48,485
và sẽ hiển thị các yếu tố thẻ với nội dung trong If.

187
00:14:48,485 --> 00:14:55,760
Vì vậy, tôi sẽ sử dụng một yếu tố thẻ để hiển thị các chi tiết của SelectedDish.

188
00:14:55,760 --> 00:14:57,290
Vì vậy, để làm điều đó,

189
00:14:57,290 --> 00:15:02,870
tôi sử dụng một thẻ mat-card ở đây từ thẻ thiết kế vật liệu ở đây.

190
00:15:02,870 --> 00:15:05,090
Các mat-card chính nó có

191
00:15:05,090 --> 00:15:10,375
một phần tiêu đề mat-card

192
00:15:10,375 --> 00:15:15,640
và cũng cùng với mat-card-header,

193
00:15:15,640 --> 00:15:21,010
nó sẽ có một mat-card-content.

194
00:15:21,010 --> 00:15:25,055
Hãy để tôi kết thúc nội dung của thẻ mat-card đó.

195
00:15:25,055 --> 00:15:27,785
Vì vậy, trong tiêu đề, tôi muốn hiển thị những gì trong tiêu đề?

196
00:15:27,785 --> 00:15:31,725
Trong tiêu đề, tôi muốn sử dụng

197
00:15:31,725 --> 00:15:37,600
một tiêu đề mat-card-title để hiển thị

198
00:15:37,600 --> 00:15:44,490
các chi tiết của tên của SelectedDish ở đây.

199
00:15:44,490 --> 00:15:53,755
Vì vậy, tôi sẽ đi vào và nói h3 và đóng h3 và bên trong ở đây tôi sẽ

200
00:15:53,755 --> 00:15:59,870
sử dụng nội suy và sau đó nói

201
00:16:00,240 --> 00:16:09,035
tên được chọn Dish và chữ hoa ống.

202
00:16:09,035 --> 00:16:17,375
Vì vậy, lưu ý làm thế nào tôi đã bao gồm tên của SelectedDish sử dụng tiêu đề mat-card-title.

203
00:16:17,375 --> 00:16:22,750
Bây giờ, ngoài ra, tôi sẽ sử dụng một phương pháp,

204
00:16:23,720 --> 00:16:33,930
một phương pháp được gọi là hình ảnh trong đó có một thuộc tính gọi là mat-card-image và

205
00:16:33,930 --> 00:16:43,630
nguồn sẽ như bạn mong đợi,

206
00:16:43,630 --> 00:16:49,270
điều này nên được chọn Dish.Image và

207
00:16:49,270 --> 00:16:54,310
sau đó thay thế tôi sẽ

208
00:16:54,310 --> 00:17:01,640
cung cấp cho như SelectedDish.Name.

209
00:17:03,450 --> 00:17:11,790
Vì vậy, đây sẽ là hình ảnh sẽ được bao gồm trong thẻ của tôi ở đây.

210
00:17:11,790 --> 00:17:13,905
Vì vậy, trong nội dung,

211
00:17:13,905 --> 00:17:27,640
tôi sẽ bao gồm mô tả SelectedDish,

212
00:17:31,680 --> 00:17:36,105
và sau đó cùng với nội dung ở đây,

213
00:17:36,105 --> 00:17:41,860
tôi cũng có thể thêm vào một số nút vào dưới cùng của thẻ.

214
00:17:41,860 --> 00:17:54,445
Vì vậy, tôi sẽ sử dụng mat-card-action ở đây và bên trong

215
00:17:54,445 --> 00:17:58,585
đó tôi có thể bao gồm một nút.

216
00:17:58,585 --> 00:18:06,550
Vì vậy, bạn thấy rằng đây là việc sử dụng một nút

217
00:18:06,550 --> 00:18:14,210
trong ứng dụng của tôi, hai nút.

218
00:18:16,130 --> 00:18:20,040
Chú ý việc sử dụng nút mat-này ở đây.

219
00:18:20,040 --> 00:18:26,360
Vì vậy, điều này sẽ biến nút này thành một thiết kế vật liệu như nút ở đây,

220
00:18:26,360 --> 00:18:30,725
và như vậy, hai nút này sẽ xuất hiện ở dưới cùng của thẻ của tôi ở đây.

221
00:18:30,725 --> 00:18:35,065
Vì vậy, với điều này, tôi đã thêm vào trong các chi tiết của SelectedDish.

222
00:18:35,065 --> 00:18:36,980
Có lý do để tôi làm việc này.

223
00:18:36,980 --> 00:18:40,910
Tôi đang cho bạn thấy làm thế nào bạn có thể hiển thị các chi tiết trong một thẻ,

224
00:18:40,910 --> 00:18:45,435
tốt, đây là để chuẩn bị cho nhiệm vụ đầu tiên của bạn.

225
00:18:45,435 --> 00:18:52,700
Vì vậy, bạn có thể thấy làm thế nào chúng ta có thể sử dụng một thẻ thiết kế vật liệu trong mẫu của chúng tôi ở đây.

226
00:18:52,700 --> 00:18:59,565
Đi đến @module .t, chúng ta cần nhập thẻ và mô-đun nút.

227
00:18:59,565 --> 00:19:07,390
Vì vậy, đi lên đến đầu chúng ta sẽ nói nhập khẩu MatcardModule từ

228
00:19:07,390 --> 00:19:13,555
thẻ vật liệu góc cạnh và

229
00:19:13,555 --> 00:19:23,150
nhập khẩu MatButtonModule từ nút vật liệu góc cạnh.

230
00:19:23,700 --> 00:19:27,280
Bây giờ chúng ta đã thêm hai vào đầu trang, chúng

231
00:19:27,280 --> 00:19:31,389
ta hãy đi đến trang trí,

232
00:19:31,389 --> 00:19:40,580
và trong nhập khẩu chúng ta hãy thêm vào MatcardModule và MatPatternModule.

233
00:19:41,430 --> 00:19:46,945
Vì vậy, chúng ta hãy lưu các thay đổi và sau đó xem nhanh trang web của chúng tôi.

234
00:19:46,945 --> 00:19:50,535
Hãy nhìn vào ứng dụng góc cạnh của chúng tôi trong trình duyệt,

235
00:19:50,535 --> 00:19:54,690
bây giờ bạn thấy rằng chúng tôi có trình đơn được hiển thị

236
00:19:54,690 --> 00:20:00,255
ở đây và sau đó ở phía dưới chúng tôi bây giờ có một phần tử thẻ.

237
00:20:00,255 --> 00:20:06,090
Vì vậy, bạn có thể thấy các yếu tố thẻ ở đây với tiêu đề ở đó và hình ảnh ở đó.

238
00:20:06,090 --> 00:20:09,770
Tất nhiên, hình ảnh trông khủng khiếp bởi vì nó là

239
00:20:09,770 --> 00:20:12,990
kích thước hình ảnh thực tế mà tôi đã cung cấp cho bạn là quá

240
00:20:12,990 --> 00:20:17,130
nhỏ và nó đã được mở rộng để lấp đầy toàn bộ màn hình.

241
00:20:17,130 --> 00:20:20,075
Nhìn phía dưới này xem. Vì vậy, điều này

242
00:20:20,075 --> 00:20:24,625
chứa mô tả của hình ảnh và sau đó là hai nút ở đây,

243
00:20:24,625 --> 00:20:26,020
ngay dưới đây.

244
00:20:26,020 --> 00:20:35,990
Vì vậy, đây là cách mat-nút phong cách các nút trong một mẫu góc,

245
00:20:35,990 --> 00:20:37,395
vì vậy bạn có thích và nút chia sẻ.

246
00:20:37,395 --> 00:20:39,070
Tất nhiên, họ không làm bất cứ điều gì,

247
00:20:39,070 --> 00:20:43,695
nhưng lưu ý thiết kế vật liệu như hành vi ở đó.

248
00:20:43,695 --> 00:20:45,070
Vì vậy, khi bạn nhấp vào nút,

249
00:20:45,070 --> 00:20:48,100
bạn có thể thấy các gợn sóng đi qua.

250
00:20:48,100 --> 00:20:52,440
Vì vậy, đó là lý do tại sao tôi quyết

251
00:20:52,440 --> 00:21:04,260
định sử dụng mô-đun vật liệu góc để thiết kế các mẫu trong khóa học này.

252
00:21:04,260 --> 00:21:07,700
Vì vậy, nhìn vào nó trên một thiết bị nhỏ hơn,

253
00:21:07,700 --> 00:21:11,960
nó trông hấp dẫn hơn nhiều trên một thiết bị nhỏ hơn.

254
00:21:11,960 --> 00:21:16,000
Vì vậy, bạn có thể thấy rằng việc kết xuất là tốt hơn nhiều trên một thiết bị nhỏ hơn,

255
00:21:16,000 --> 00:21:19,715
bạn có thể thấy rằng trên màn hình bạn

256
00:21:19,715 --> 00:21:27,245
có thể thấy thẻ ngay tại đó hiển thị các chi tiết và hai nút ở đó,

257
00:21:27,245 --> 00:21:29,750
như thế và nút chia sẻ,

258
00:21:29,750 --> 00:21:34,190
và các chi tiết của món ăn.

259
00:21:37,080 --> 00:21:40,650
Vì vậy, điều đó hoàn thành bài tập này.

260
00:21:40,650 --> 00:21:42,170
Vì vậy, trong bài tập này,

261
00:21:42,170 --> 00:21:49,800
chúng tôi đã kiểm tra việc sử dụng danh sách lưới và

262
00:21:49,800 --> 00:22:00,030
các thành phần thiết kế vật liệu thẻ để thiết kế mẫu cho thành phần menu của chúng tôi.

263
00:22:00,030 --> 00:22:05,720
Đây có thể là thời điểm tốt cho bạn để làm một bình luận tốt với thông điệp, các

264
00:22:05,720 --> 00:22:09,620
thành phần góc phần hai.