Create the application’s HousingLocation component

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

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.

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.

   2. Run this command to create a new HousingLocationComponent

            
      ng generate component housingLocation
          

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

            
      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.

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.

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

      Import HousingLocationComponent in src/app/home/home.component.ts

            
      import {Component} from '@angular/core';
      import {CommonModule} from '@angular/common';
      import {HousingLocationComponent} from '../housing-location/housing-location.component';
      @Component({
        selector: 'app-home',
        standalone: true,
        imports: [CommonModule, HousingLocationComponent],
        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>
        `,
        styleUrls: ['./home.component.css'],
      })
      export class HomeComponent {}
      
          

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

      Add HousingLocationComponent to imports array in src/app/home/home.component.ts

            
      import {Component} from '@angular/core';
      import {CommonModule} from '@angular/common';
      import {HousingLocationComponent} from '../housing-location/housing-location.component';
      @Component({
        selector: 'app-home',
        standalone: true,
        imports: [CommonModule, HousingLocationComponent],
        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>
        `,
        styleUrls: ['./home.component.css'],
      })
      export class HomeComponent {}
      
          

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

      Add housing location to the component template in src/app/home/home.component.ts

            
      import {Component} from '@angular/core';
      import {CommonModule} from '@angular/common';
      import {HousingLocationComponent} from '../housing-location/housing-location.component';
      @Component({
        selector: 'app-home',
        standalone: true,
        imports: [CommonModule, HousingLocationComponent],
        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>
        `,
        styleUrls: ['./home.component.css'],
      })
      export class HomeComponent {}
      
          

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:

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

      Add CSS styles to housing location to the component in src/app/housing-location/housing-location.component.css

            
      .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;
      }
      
          

   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.