Create the application’s HousingLocation component

This tutorial lesson demonstrates how to add the HousingLocation component to your Angular app.

<docs-video src="https://www.youtube.com/embed/R0nRX8jD2D0?si=U4ONEbPvtptdUHTt&amp;start=440"/>

What you'll learn

• Your app has a new component: HousingLocation and it displays a message confirming that the component was added to your application.

<docs-workflow> <docs-step title="Create the `HousingLocation`"> 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.

2. Run this command to create a new HousingLocation

   shellCopy

   ng generate component housingLocation
   

3. Run this command to build and serve your app.

   shellCopy

   ng serve
   

   NOTE: This step is only for your local environment!

4. Open a browser and navigate to http://localhost:4200 to find the application.

5. Confirm that the app builds without error.

   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.

6. Leave ng serve running as you complete the next steps. </docs-step>

<docs-step title="Add the new component to your app's layout"> In this step, you add the new component, `HousingLocation` to your app's `Home`, so that it displays in your app's layout.

In the Edit pane of your IDE:

1. Open home.ts in the editor.

2. In home.ts, import HousingLocation by adding this line to the file level imports.

   <docs-code header="Import HousingLocation in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[2]"/>

3. Next update the imports property of the @Component metadata by adding HousingLocation to the array.

   <docs-code header="Add HousingLocation to imports array in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[6]"/>

4. Now the component is ready for use in the template for the Home. Update the template property of the @Component metadata to include a reference to the <app-housing-location> tag.

   <docs-code language="angular-ts" header="Add housing location to the component template in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[7,17]"/>

</docs-step> <docs-step title="Add the styles for the component"> In this step, you will copy over the pre-written styles for the `HousingLocation` to your app so that the app renders properly.

1. Open src/app/housing-location/housing-location.css, and paste the styles below into the file:

   NOTE: In the browser, these can go in src/app/housing-location/housing-location.ts in the styles array.

   <docs-code header="Add CSS styles to housing location to the component in src/app/housing-location/housing-location.css" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/housing-location/housing-location.css"/>

2. 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.

</docs-step> </docs-workflow>

SUMMARY: In this lesson, you created a new component for your app and added it to the app's layout.