You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Angular apps are built around components, which are Angular's building blocks.
14
+
Components contain the code, HTML layout, and CSS style information that provide the function and appearance of an element in the app.
15
+
In Angular, components can contain other components. An app's functions and appearance can be divided and partitioned into components.
16
+
17
+
In Angular, components have metadata that define its properties.
18
+
When you create your `Home`, you use these properties:
19
+
20
+
-`selector`: to describe how Angular refers to the component in templates.
21
+
-`standalone`: to describe whether the component requires a `NgModule`.
22
+
-`imports`: to describe the component's dependencies.
23
+
-`template`: to describe the component's HTML markup and layout.
24
+
-`styleUrls`: to list the URLs of the CSS files that the component uses in an array.
25
+
26
+
<docs-pill-row>
27
+
<docs-pillhref="api/core/Component"title="Learn more about Components"/>
28
+
</docs-pill-row>
29
+
30
+
<docs-workflow>
31
+
32
+
<docs-steptitle="Create the `Home`">
33
+
In this step, you create a new component for your app.
34
+
35
+
In the **Terminal** pane of your IDE:
36
+
37
+
1. In your project directory, navigate to the `first-app` directory.
38
+
1. Run this command to create a new `Home`
39
+
40
+
```shell
41
+
ng generate component home
42
+
```
43
+
44
+
1. Run this command to build and serve your app.
45
+
46
+
NOTE: This step is only for your local environment!
47
+
48
+
```shell
49
+
ng serve
50
+
```
51
+
52
+
1. Open a browser and navigate to `http://localhost:4200` to find the application.
53
+
54
+
1. Confirm that the app builds without error.
55
+
56
+
HELPFUL: It should render the same as it did in the previous lesson because even though you added a new component, you haven't included it in any of the app's templates, yet.
57
+
58
+
1. Leave `ng serve` running as you complete the next steps.
59
+
</docs-step>
60
+
61
+
<docs-steptitle="Add the new component to your app's layout">
62
+
In this step, you add the new component, `Home` to your app's root component, `App`, so that it displays in your app's layout.
63
+
64
+
In the **Edit** pane of your IDE:
65
+
66
+
1. Open `app.ts` in the editor.
67
+
1. In `app.ts`, import `Home` by adding this line to the file level imports.
68
+
69
+
<docs-codeheader="Import Home in src/app/app.ts"path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts"visibleLines="[2]"/>
70
+
71
+
1. In `app.ts`, in `@Component`, update the `imports` array property and add `Home`.
72
+
73
+
<docs-codeheader="Replace in src/app/app.ts"path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts"visibleLines="[6]"/>
74
+
75
+
1. In `app.ts`, in `@Component`, update the `template` property to include the following HTML code.
76
+
77
+
<docs-codelanguage="angular-ts"header="Replace in src/app/app.ts"path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts"visibleLines="[7,16]"/>
78
+
79
+
1. Save your changes to `app.ts`.
80
+
1. If `ng serve` is running, the app should update.
81
+
If `ng serve` is not running, start it again.
82
+
_Hello world_ in your app should change to _home works!_ from the `Home`.
83
+
1. Check the running app in the browser and confirm that the app has been updated.
84
+
85
+
<imgalt="browser frame of page displaying the text 'home works!'"src="assets/images/tutorials/first-app/homes-app-lesson-02-step-2.png">
86
+
87
+
</docs-step>
88
+
89
+
<docs-steptitle="Add features to `Home`">
90
+
91
+
In this step you add features to `Home`.
92
+
93
+
In the previous step, you added the default `Home` to your app's template so its default HTML appeared in the app.
94
+
In this step, you add a search filter and button that is used in a later lesson.
95
+
For now, that's all that `Home` has.
96
+
Note that, this step just adds the search elements to the layout without any functionality, yet.
97
+
98
+
If you started from a fresh Angular project instead of downloading the starter
99
+
(ng new): add these globals to `src/styles.css` so the search button and input border are visible:
100
+
101
+
```
102
+
:root {
103
+
--primary-color: #605DC8;
104
+
--secondary-color: #8B89E6;
105
+
--accent-color: #e8e7fa;
106
+
--shadow-color: #E8E8E8;
107
+
}
108
+
109
+
button.primary {
110
+
padding: 10px;
111
+
border: solid 1px var(--primary-color);
112
+
background: var(--primary-color);
113
+
color: white;
114
+
border-radius: 8px;
115
+
}
116
+
```
117
+
118
+
In the **Edit** pane of your IDE:
119
+
120
+
1. In the `first-app` directory, open `home.ts` in the editor.
121
+
1. In `home.ts`, in `@Component`, update the `template` property with this code.
122
+
123
+
<docs-codelanguage="angular-ts"header="Replace in src/app/home/home.ts"path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts"visibleLines="[5,12]"/>
124
+
125
+
1. Next, open `home.css` in the editor and update the content with these styles.
126
+
127
+
NOTE: In the browser, these can go in `src/app/home/home.ts` in the `styles` array.
128
+
129
+
<docs-codeheader="Replace in src/app/home/home.css"path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.css"/>
130
+
131
+
1. Confirm that the app builds without error. You should find the filter query box and button in your app and they should be styled. Correct any errors before you continue to the next step.
132
+
133
+
<imgalt="browser frame of homes-app displaying logo, filter text input box and search button"src="assets/images/tutorials/first-app/homes-app-lesson-02-step-3.png">
134
+
</docs-step>
135
+
136
+
</docs-workflow>
137
+
138
+
SUMMARY: In this lesson, you created a new component for your app and gave it a filter edit control and button.
139
+
140
+
For more information about the topics covered in this lesson, visit:
HELPFUL: It should render the same as it did in the previous lesson because even though you added a new component, you haven't included it in any of the app's templates, yet.
<docs-codeheader="Import Home in src/app/app.ts"path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts"visibleLines="[2]"/>
<docs-codelanguage="angular-ts"header="Replace in src/app/app.ts"path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/app.ts"visibleLines="[7,16]"/>
<docs-codelanguage="angular-ts"header="Replace in src/app/home/home.ts"path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts"visibleLines="[5,12]"/>
1.Confirm that the app builds without error. You should find the filter query box and button in your app and they should be styled. Correct any errors before you continue to the next step.
<imgalt="browser frame of homes-app displaying logo, filter text input box and search button"src="assets/images/tutorials/first-app/homes-app-lesson-02-step-3.png">
0 commit comments