Customizing components and directives (Part 4) — Transcript

Full transcript

1. 0:02hey friends welcome back so far we've
2. 0:05built out the base structure of our
3. 0:07application but we need a few more
4. 0:10things
5. 0:10one we need to build out the structure
6. 0:13for the housing component
7. 0:16two we need to make the component
8. 0:18customizable so that we can dynamically
9. 0:20create one component per housing
10. 0:23location three we need to dynamically
11. 0:27display the housing locations and
12. 0:30finally we need to add some styling to
13. 0:33the application in order to make it
14. 0:35render like the screenshots
15. 0:37we have some work to do so let's get to
16. 0:39it let's start in the housing location
17. 0:42dot component.ts file and update the
18. 0:45template property of the component
19. 0:47metadata with the code needed for our
20. 0:49component template
21. 0:51let's start by adding a section element
22. 0:54with the class listing next we'll add
23. 0:58three child elements
24. 1:00an image tag with the class listing Dash
25. 1:03photo
26. 1:06an H2 tag with the class listing Dash
27. 1:10heading
28. 1:12and a p element with the class listing
29. 1:16Dash location
30. 1:17now let's save all of our changes the
31. 1:20browser will be updated but we'll likely
32. 1:23not find any new content and that's
33. 1:25because right now the HTML doesn't have
34. 1:28any content
35. 1:30the content that we need are the
36. 1:32specific properties that make a housing
37. 1:34location unique
38. 1:35let's sort that part out now
39. 1:38we've created three elements in the
40. 1:40template a place for the listing photo
41. 1:42the listing heading text and the listing
42. 1:45location it would be great to be able to
43. 1:48pass data to this component that
44. 1:50contained it the values that we need
45. 1:51fortunately there is a feature in an
46. 1:54angular that allows us to do just that
47. 1:56input properties
48. 1:58angular components can receive data
49. 2:01through a feature called input
50. 2:03properties
51. 2:04now the next question is how should that
52. 2:07data be configured let's review the data
53. 2:11we can expect to receive that describes
54. 2:13a housing location
55. 2:15each location will have an ID name city
56. 2:18state photo number of available units a
57. 2:23Boolean value for whether or not it has
58. 2:25Wi-Fi and another Boolean value for
59. 2:27whether or not it has laundry
60. 2:30on the landing page of the application
61. 2:32will only display the name city and
62. 2:35state
63. 2:36these are the three properties we want
64. 2:38to use in our components
65. 2:41we want our component to accept housing
66. 2:43location data in this specific format
67. 2:45now this is a job for a type types help
68. 2:49us to know what to expect from data that
69. 2:52we encounter
70. 2:53we can create a new type that represents
71. 2:56our data we'll create an interface to
72. 2:58use in our application now an interface
73. 3:01is a contract between us and the data
74. 3:04the interface tells us that we can
75. 3:06expect the data to follow the structure
76. 3:09defined by the interface we can also
77. 3:12consider it to shape our data from the
78. 3:15command line run NG generate interface
79. 3:18housing location use a capital l for
80. 3:22location
81. 3:23we use the angular CLI here again with
82. 3:26the generic command and we instructed to
83. 3:28create an interface called housing
84. 3:30location and housinglocation.ts update
85. 3:34their interface to have the following
86. 3:35properties that describe our data ID of
87. 3:39type number
88. 3:40name of type string city of type string
89. 3:43state of type string photo of type
90. 3:47string available units of type number
91. 3:50Wi-Fi of type Boolean laundry of type
92. 3:53Boolean
93. 3:55save this file and we'll move on to the
94. 3:57next place in the code where we'll make
95. 4:00updates
96. 4:01now we have the pieces to put everything
97. 4:03together we'll use input properties to
98. 4:06pass data into our component and use the
99. 4:08interface to let the component know what
100. 4:11type of data to expect
101. 4:13you can Mark a component property with
102. 4:14the input decorator and this tells the
103. 4:16angular that the property can be set in
104. 4:19a template in housing location dot
105. 4:22component.ts we need to update the
106. 4:24Imports to include input from angular
107. 4:27forward slash core
108. 4:28we also need to import housing location
109. 4:31wrapped in curly braces again
110. 4:34from dot dot forward slash housing
111. 4:37location next in the body of housing
112. 4:39location component class We'll add a new
113. 4:42property called housing location
114. 4:44lowercase h capital L of tight housing
115. 4:48location capital h capital l
116. 4:52we're going to add one more change here
117. 4:54we want to prefix the housing location
118. 4:57property with the input decorator to
119. 5:00make it an input property
120. 5:02Remember The Decorator requires the at
121. 5:05symbol before The Decorator name and
122. 5:07parentheses afterwards when you say this
123. 5:10code the editor May display an error for
124. 5:12the housing location property well
125. 5:14that's because as an input we're
126. 5:16expecting the value to be passed in so
127. 5:19we haven't initialized it in this case
128. 5:21we know that the value will be passed in
129. 5:23so we'll update the property to have an
130. 5:26exclamation point after the property
131. 5:28name the exclamation point is called the
132. 5:30non-null assertion operator and it tells
133. 5:33typescript compiler that the value of
134. 5:35this property won't be null or undefined
135. 5:37all right now our component has an input
136. 5:41property named housing location that we
137. 5:43can work with and the component
138. 5:45decorated metadata let's update the
139. 5:47template property to access the
140. 5:49properties that we need to display
141. 5:51the image tag needs a source attribute
142. 5:54to display an image let's add one now
143. 5:57Source equal quote
144. 5:59housinglocation.photo quote make sure
145. 6:02that the housing location property is
146. 6:04camel case
147. 6:06now there's one slight change to make
148. 6:08here
149. 6:09as is the template treats the value of
150. 6:12the source attribute as a string with
151. 6:15the value housing location.photo to
152. 6:18resolve that we need to use another
153. 6:19feature of angular called property
154. 6:21binding property binding allows us to
155. 6:24tell angular that the value in quotes
156. 6:26should be an actual property from the
157. 6:29component class to enable property
158. 6:32binding we'll wrap the source attribute
159. 6:34in square brackets
160. 6:36because this is an image we should be
161. 6:39mindful to add an ALT text for screen
162. 6:41readers and other assistive Technologies
163. 6:44alt equals quote exterior photo of
164. 6:48double open curly brace
165. 6:51housinglocation.name double close curly
166. 6:54brace okay let me explain what we just
167. 6:57did the double curly braces are used for
168. 6:59angular interpolation syntax we can use
169. 7:02that to mix in values and expressions
170. 7:04into Strings in our templates when this
171. 7:07gets rendered to the screen the value
172. 7:09will be a string that reads exterior
173. 7:12photo of ABC or whatever the name of the
174. 7:15housing location is
175. 7:17we can use this all over templates it's
176. 7:19a great tool to have in our toolbox so
177. 7:22let's do more interpolation
178. 7:25let's update the content of the H2 to be
179. 7:28double open curly braces housing
180. 7:31location dot name double close curly
181. 7:33braces
182. 7:35also update the content of the P tag to
183. 7:38be double open curly braces housing
184. 7:41location dot City double close curly
185. 7:44braces comma space double open curly
186. 7:48braces housing location dot State double
187. 7:50closed curly braces we can be creative
188. 7:53with interpolation to create the display
189. 7:55that we want with our templates the
190. 7:58housing location component now accepts
191. 8:01an input that we can use to customize
192. 8:03the component the next step is to work
193. 8:05with the list of locations considering
194. 8:08that let's add our list in
195. 8:11home.component.ts let's import housing
196. 8:14location from dot dot forward slash
197. 8:17housing location
198. 8:19then we're going to add a new property
199. 8:21to the home component class called
200. 8:24housing location list of type housing
201. 8:27location array and we're going to assign
202. 8:30it to be an empty array
203. 8:32now we're going to copy and paste the
204. 8:34array entries from GitHub for this
205. 8:36project
206. 8:37head to
207. 8:39g-o-o.gle forward slash home slash app
208. 8:42dash listings this URL will take you to
209. 8:45code on GitHub that contains all the
210. 8:46entries required in
211. 8:49home.component.ts replace the empty
212. 8:51array value for the housing location
213. 8:53list property with the data from the
214. 8:56entries you just copied
215. 8:58the results section is where we want to
216. 9:01iterate over the entries of the housing
217. 9:03location list and display a housing
218. 9:05location component for each entry in
219. 9:07JavaScript whenever we want to iterate
220. 9:10over an array we use something like a
221. 9:11for Loop that's the same idea we want
222. 9:14here we want something like a for Loop
223. 9:17an angular there's a syntax we can use
224. 9:19to accomplish this goal it's called the
225. 9:22ng4 directive angular directives allows
226. 9:26us to add additional functionality to
227. 9:28elements and components
228. 9:30now we're going to add the ng4 directive
229. 9:33to the housing location component update
230. 9:36the app dash housing Dash location tag
231. 9:39to include the following asterisk ng4
232. 9:42equals quotes let housing location of
233. 9:46housing location list quote the code
234. 9:49within the quotes is called angular
235. 9:51template syntax it creates a template
236. 9:54variable called housing location which
237. 9:56represents an entry from the housing
238. 9:58location list the next step is to pass
239. 10:01the housing location data to the housing
240. 10:04Dash location components using the
241. 10:07inputs from the components
242. 10:09update the app dash housing Dash
243. 10:12location component to include
244. 10:14opening square bracket housing location
245. 10:17closing square bracket equals
246. 10:20quote housing location quote remember
247. 10:23this should be a separate attribute on
248. 10:26the app dash housing Dash location
249. 10:27component tag and not a part of the ng4
250. 10:33save your progress and check the browser
251. 10:36we have data being displayed this is
252. 10:39fantastic progress so far but I'm sure
253. 10:41you've noticed that the UI could use
254. 10:43some updating to Mac UI that we started
255. 10:46with the housing location images are too
256. 10:48big and the items are not listed in a
257. 10:51grid because we're focusing on angular
258. 10:53and not CSS I'm going to provide you
259. 10:56with all of the style updates you need
260. 10:58to make to the code at this URL
261. 11:01goo.gle forward slash homes Dash app
262. 11:05dash styles each update will be listed
263. 11:08with instructions and you can copy and
264. 11:10paste the changes from there into your
265. 11:12application
266. 11:13all right with the Styles applied save
267. 11:16all files check the browser and you
268. 11:18should find that our application matches
269. 11:20the original design great job friends
270. 11:23really fantastic work
271. 11:25in this module we've done a lot so let's
272. 11:29recap
273. 11:30we built the structure for our housing
274. 11:32component we made the component
275. 11:34customizable with the use of inputs so
276. 11:37that we could display each component
277. 11:38with the correct data we updated the
278. 11:41template to use the ng4 directive in
279. 11:43order to iterate over the housing
280. 11:45location array to display each location
281. 11:48and finally we added some styling to the
282. 11:51application to make it render like the
283. 11:54screenshots okay that is a really really
284. 11:57great work you should be very proud of
285. 11:59yourself and in the next section we'll
286. 12:01update the app to support routing very
287. 12:04exciting and I'll catch you in the next
288. 12:06chapter
289. 12:09foreign
290. 12:11[Music]