Components in Angular - Learning Angular (Part 3) — Transcript

Full transcript

1. 0:02hey friends welcome back an angular the
2. 0:06core part of any application is the use
3. 0:08of components components in angular have
4. 0:11three parts the component class written
5. 0:14in typescript provides developers a
6. 0:16place to build their application logic
7. 0:19consider this to be the place where one
8. 0:22may make API calls for data or Define
9. 0:25event handlers for example a component
10. 0:28also has an HTML template the template
11. 0:31is where we Define the user interface
12. 0:33for the component
13. 0:35we can write this in at the component
14. 0:37class if it's a small template or for
15. 0:40more complex templates we can include
16. 0:41them in their own HTML file the final
17. 0:45part of the component are the Styles the
18. 0:48angular CLI supports authoring styles
19. 0:50with SAS less or plain CSS the Styles we
20. 0:54write for our components are scoped to
21. 0:57our components
22. 0:58similar to the component template
23. 1:00component Styles can be included in line
24. 1:03within the component class or written in
25. 1:06their own separate file
26. 1:08in this course we'll keep the Styles in
27. 1:11a separate file
28. 1:13now let's take what we've just learned
29. 1:15about components and apply it to our
30. 1:18application this application can be
31. 1:20built up from multiple components first
32. 1:24there's the header with the homes Dash
33. 1:26app logo that will appear on all of the
34. 1:29pages now we don't need to make this a
35. 1:32component we can add it to the app
36. 1:34component template and just leave it
37. 1:36there next there's a case of the search
38. 1:38box and the search results
39. 1:41since these two parts of the application
40. 1:43are only shown together on the home page
41. 1:45we're going to keep these two together
42. 1:47in their own component called home
43. 1:50components
44. 1:51components can be nested and used inside
45. 1:54one another
46. 1:56now the housing locations which display
47. 1:58photo name and location seem like
48. 2:01another opportunity to create a
49. 2:04component
50. 2:05the Styles and structure will be the
51. 2:07same but the data will be different
52. 2:09we'll create a component for this called
53. 2:11housing location component and use it in
54. 2:14the home component
55. 2:17if things are a little unclear about the
56. 2:19approach don't worry because we'll do
57. 2:21this one step at a time
58. 2:23you got this
59. 2:25let's get started with the header an
60. 2:28app.component.ts will remove all the
61. 2:31placeholder codes that we started with
62. 2:33and replace it with a main tag we'll
63. 2:36then add a header tag as a child with
64. 2:39the class brand Dash name
65. 2:43as a sibling element add an image tag
66. 2:46with the class brand logo The Source the
67. 2:49attribute set to the value forward slash
68. 2:51assets forward slash logo.svg and we
69. 2:55can't forget the alt text set that to
70. 2:58logo
71. 2:59since this is a logo and it is purely
72. 3:02decorative we'll also add the Aria
73. 3:04hidden attribute and set the value to
74. 3:06true
75. 3:08saving app Dot component.ts and
76. 3:10reviewing the content in the browser
77. 3:12will reveal our logo but the Styles have
78. 3:15not been applied just yet we'll get
79. 3:18there
80. 3:19let's move on to the home component that
81. 3:21we discussed that will contain the
82. 3:23search bar and the search results
83. 3:25to create a component we'll run the
84. 3:28following command from the command line
85. 3:29of our project
86. 3:31NG generate component home dash dash
87. 3:36Standalone dash dash inline Dash
88. 3:39template
89. 3:40energy generate component will instruct
90. 3:43the angular CLI to create a component
91. 3:46Force followed by the home which is the
92. 3:49name of our component next we include
93. 3:52some configuration by specifying Flags
94. 3:54we include dash dash Standalone to make
95. 3:57it a standalone component Standalone
96. 3:59components are angular's new component
97. 4:01style that reduce complexity and add
98. 4:04some other cool features
99. 4:06because the template code is going to be
100. 4:08minimal will also include dash dash
101. 4:11inline Dash template
102. 4:14this results in less files for us to
103. 4:17manage
104. 4:18since we aren't focusing on the Styles
105. 4:20in this course we'll keep the Styles in
106. 4:22a separate file
107. 4:25let's run this command to create our new
108. 4:27component
109. 4:28the output of the command confirms which
110. 4:31files have been created and where they
111. 4:33are located in the project
112. 4:35let's update
113. 4:37app.component.ts to reference our new
114. 4:39component in the template
115. 4:42first we'll add a section element as a
116. 4:44sibling to the header element
117. 4:46we'll give the section element the class
118. 4:48content as a child of the section
119. 4:51element let's add our component app dash
120. 4:55home
121. 4:56our components use the app dash prefix
122. 4:58this can be configured in your
123. 5:00application if this is something that
124. 5:02you'd like to change for us this is fine
125. 5:05and let's save the changes and review
126. 5:07the updates in the browser
127. 5:09the code editor may have an error here
128. 5:11that's because the main application
129. 5:13component app component needs to know
130. 5:16about our new home component to fix this
131. 5:19issue we'll add a new property to the
132. 5:21component decorator metadata for app
133. 5:23component called Imports the Imports
134. 5:26property lets us list the dependencies
135. 5:28for the component since we want to use
136. 5:30home component in this template it's a
137. 5:33dependency now
138. 5:34first let's add a file level import for
139. 5:37home component at the top of
140. 5:38app.component.ts
141. 5:41import home component wrapped in curly
142. 5:44braces from dot forward slash home
143. 5:47forward slash home dot component next in
144. 5:50the component decorated metadata add a
145. 5:53property called Imports set the value to
146. 5:55be an array containing home component as
147. 5:58the singular entry
148. 6:00save all your changes then in the
149. 6:03browser the render page has our header
150. 6:05and the text home works great we've
151. 6:09created a new component and Incorporated
152. 6:11it into our application wonderful work
153. 6:14you are doing great and I'm proud of you
154. 6:18there are a few more steps to complete
155. 6:20before we're done with this part so
156. 6:21let's get back to it our next step is to
157. 6:24update the template of Home component to
158. 6:26contain the HTML markup for the search
159. 6:29bar and results in home.component.ts
160. 6:33let's add the following code to the
161. 6:35template section of the component
162. 6:37decorated metadata
163. 6:39add a section element with a form as a
164. 6:42child now the form has two children and
165. 6:46input with the typeset to text and the
166. 6:48placeholder attribute set to the string
167. 6:50filter by City And a button with the
168. 6:54type attribute set to button and the
169. 6:56class set to primary
170. 6:58as for the button label set it to search
171. 7:02next as a sibling to the section element
172. 7:05we'll add another section but this one
173. 7:08will have the class results
174. 7:11in just a few moments we'll add our
175. 7:13housing locations to the results section
176. 7:15but first let's save this and review the
177. 7:18output in the browser
178. 7:20fantastic we have a search and our
179. 7:24button let's keep going because there's
180. 7:26still more cool stuff they want to do in
181. 7:27the app let's take care of the housing
182. 7:30listing since we decided that it would
183. 7:32be great to have a reusable component
184. 7:34let's make a new one we'll run a similar
185. 7:37command to the previous create component
186. 7:39command from the command line in your
187. 7:41project enter NG generate component
188. 7:45housing location dash dash Standalone
189. 7:48dash dash n line Dash template all right
190. 7:52with that command run we get a new
191. 7:54component in order to use this component
192. 7:56we have to import it and add it as a
193. 7:59dependency of the home component and
194. 8:02home.component.ts add a file level
195. 8:05import for a housing location component
196. 8:07import housing location component
197. 8:10wrapped in curly braces from dot dot
198. 8:12forward slash housing Dash location
199. 8:14forward slash housing Dash location dot
200. 8:18component next update the Imports array
201. 8:21of the component decorated metadata to
202. 8:24include a reference to housing location
203. 8:26components
204. 8:27then in the template section of the same
205. 8:30file
206. 8:31add the app dash housing Dash location
207. 8:33tag as a child of the results section
208. 8:37elements
209. 8:38save your changes and will be greeted
210. 8:40with a familiar output in the browser
211. 8:42the text housing location Works will be
212. 8:45displayed beneath the search input and
213. 8:47button
214. 8:49we have one more component to update the
215. 8:52housing location component we want to
216. 8:54display housing locations on the screen
217. 8:56but this is going to require a little
218. 8:59more work so let's say what we've done
219. 9:00so far and we'll pick this one up in the
220. 9:03next section great work so far friends
221. 9:06I'll catch you in the next section
222. 9:10foreign
223. 9:15[Music]