This tutorial lesson demonstrates how to add the HousingLocation
component to your Angular app.
Time required: expect to spend about 10 minutes to complete this lesson.
This lesson starts with the code from the previous lesson, so you can:
If you haven't reviewed the introduction, visit the Introduction to Angular tutorial to make sure you have everything you need to complete this lesson.
If you have any trouble during this lesson, you can review the completed code for this lesson, in the live example for this lesson.
HousingLocationComponent
and it displays a message confirming that the component was added to your application.Perform these steps on the app code in your IDE.
HousingLocationComponent
In this step, you create a new component for your app.
In the Terminal pane of your IDE:
In your project directory, navigate to the first-app
directory.
Run this command to create a new HousingLocationComponent
ng generate component HousingLocation --standalone --inline-template --skip-tests
Run this command to build and serve your app.
ng serve
Open a browser and navigate to http://localhost:4200
to find the application.
Confirm that the app builds without error.
Note: 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.
Leave ng serve
running as you complete the next steps.
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:
Open home.component.ts
in the editor.
In home.component.ts
, import HousingLocationComponent
by adding this line to the file level imports.
import { HousingLocationComponent } from '../housing-location/housing-location.component';
Next update the imports
property of the @Component
metadata by adding HousingLocationComponent
to the array.
imports: [ CommonModule, HousingLocationComponent ],
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.
template: ` <section> <form> <input type="text" placeholder="Filter by city"> <button class="primary" type="button">Search</button> </form> </section> <section class="results"> <app-housing-location></app-housing-location> </section> `,
In this step, you will copy over the pre-written styles for the HousingLocationComponent
to your app so that the app renders properly.
Open src/app/housing-location/housing-location.css
, and paste the styles below into the file:
.listing { background: var(--accent-color); border-radius: 30px; padding-bottom: 30px; } .listing-heading { color: var(--primary-color); padding: 10px 20px 0 20px; } .listing-photo { height: 250px; width: 100%; object-fit: cover; border-radius: 30px 30px 0 0; } .listing-location { padding: 10px 20px 20px 20px; } .listing-location::before { content: url("/assets/location-pin.svg") / ""; } section.listing a { padding-left: 20px; text-decoration: none; color: var(--primary-color); } section.listing a::after { content: "\203A"; margin-left: 5px; }
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.
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.
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/tutorial/first-app/first-app-lesson-03