mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
87 lines
4.2 KiB
Markdown
87 lines
4.2 KiB
Markdown
# Lesson 3: Create the application’s HousingLocation component
|
||
|
||
This tutorial lesson demonstrates how to add the `HousingLocation` component to your Angular app.
|
||
|
||
**Estimated time**: ~10 minutes
|
||
|
||
**Starting code:** <live-example name="first-app-lesson-02"></live-example>
|
||
|
||
**Completed code:** <live-example name="first-app-lesson-03"></live-example>
|
||
|
||
## What you'll learn
|
||
* Your app has a new component: `HousingLocationComponent` and it displays a message confirming that the component was added to your application.
|
||
|
||
## Step 1 - Create the `HousingLocationComponent`
|
||
|
||
In this step, you create a new component for your app.
|
||
|
||
In the **Terminal** pane of your IDE:
|
||
|
||
1. In your project directory, navigate to the `first-app` directory.
|
||
|
||
1. Run this command to create a new `HousingLocationComponent`
|
||
|
||
<code-example format="shell" language="shell">
|
||
ng generate component housingLocation --inline-template --skip-tests
|
||
</code-example>
|
||
|
||
1. Run this command to build and serve your app.
|
||
|
||
<code-example format="shell" language="shell">
|
||
|
||
ng serve
|
||
|
||
</code-example>
|
||
|
||
1. Open a browser and navigate to `http://localhost:4200` to find the application.
|
||
1. Confirm that the app builds without error.
|
||
<div class="callout is-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.
|
||
</div>
|
||
1. Leave `ng serve` running as you complete the next steps.
|
||
|
||
## Step 2 - Add the new component to your app's layout
|
||
|
||
In this step, you add the new component, `HousingLocationComponent` to your app's `HomeComponent`, so that it displays in your app's layout.
|
||
|
||
In the **Edit** pane of your IDE:
|
||
|
||
1. Open `home.component.ts` in the editor.
|
||
1. In `home.component.ts`, import `HousingLocationComponent` by adding this line to the file level imports.
|
||
|
||
<code-example header="Import HousingLocationComponent in src/app/home/home.component.ts" path="first-app-lesson-03/src/app/home/home.component.ts" region="import-housingLocation"></code-example>
|
||
|
||
1. Next update the `imports` property of the `@Component` metadata by adding `HousingLocationComponent` to the array.
|
||
|
||
<code-example header="Add HousingLocationComponent to imports array in src/app/home/home.component.ts" path="first-app-lesson-03/src/app/home/home.component.ts" region="add-housingLocation-to-array"></code-example>
|
||
|
||
1. Now the component is ready for use in the template for the `HomeComponent`. Update the `template` property of the `@Component` metadata to include a reference to the `<app-housing-location>` tag.
|
||
|
||
<code-example header="Add housing location to the component template in src/app/home/home.component.ts" path="first-app-lesson-03/src/app/home/home.component.ts" region="add-housingLocation-to-template"></code-example>
|
||
|
||
## Step 3 - Add the styles for the component
|
||
|
||
In this step, you will copy over the pre-written styles for the `HousingLocationComponent` to your app so that the app renders properly.
|
||
|
||
1. Open `src/app/housing-location/housing-location.component.css`, and paste the styles below into the file:
|
||
|
||
<code-example header="Add CSS styles to housing location to the component in src/app/housing-location/housing-location.component.css" path="first-app-lesson-03/src/app/housing-location/housing-location.component.css"></code-example>
|
||
|
||
1. Save your code, return to the browser and confirm that the app builds without error. You should find the message "housing-location works!" rendered to the screen.Correct any errors before you continue to the next step.
|
||
|
||
<section class="lightbox">
|
||
<img alt="browser frame of homes-app displaying logo, filter text input box and search button and the message 'housing-location works!" src="generated/images/guide/faa/homes-app-lesson-03-step-2.png">
|
||
</section>
|
||
|
||
|
||
## Lesson review
|
||
|
||
In this lesson, you created a new component for your app and added it to the app's layout.
|
||
|
||
If you are having any trouble with this lesson, you can review the completed code for it in the <live-example></live-example>.
|
||
|
||
## Next steps
|
||
|
||
* [First Angular app lesson 4 - Add a housing location interface to the application](tutorial/first-app/first-app-lesson-04)
|
||
|
||
@reviewed 2023-10-24
|