Add a property binding to a component’s template

This tutorial lesson demonstrates how to add property binding to a template and use it to pass dynamic data to components.

What you'll learn

• Your app has data bindings in the HomeComponent template.
• Your app sends data from the HomeComponent to the HousingLocationComponent.

Conceptual preview of Inputs

In this lesson, you'll continue the process of sharing data from the parent component to the child component by binding data to those properties in the template using property binding.

Property binding enables you to connect a variable to an Input in an Angular template. The data is then dynamically bound to the Input.

For a more in depth explanation, please refer to the Property binding guide.

1. Update the HomeComponent template

   This step adds property binding to the <app-housing-location> tag.

   In the code editor:

   1. Navigate to src/app/home/home.component.ts

   2. In the template property of the @Component decorator, update the code to match the code below:

      Add housingLocation property binding

            
      import {Component} from '@angular/core';
      import {CommonModule} from '@angular/common';
      import {HousingLocationComponent} from '../housing-location/housing-location.component';
      import {HousingLocation} from '../housinglocation';
      @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 [housingLocation]="housingLocation"></app-housing-location>
          </section>
        `,
        styleUrls: ['./home.component.css'],
      })
      export class HomeComponent {
        readonly baseUrl = 'https://angular.dev/assets/tutorials/common';
        housingLocation: HousingLocation = {
          id: 9999,
          name: 'Test Home',
          city: 'Test city',
          state: 'ST',
          photo: `${this.baseUrl}/example-house.jpg`,
          availableUnits: 99,
          wifi: true,
          laundry: false,
        };
      }
      
          

      When adding a property binding to a component tag, we use the [attribute] = "value" syntax to notify Angular that the assigned value should be treated as a property from the component class and not a string value.

      The value on the right-hand side is the name of the property from the HomeComponent.

2. Confirm the code still works

   1. Save your changes and confirm the app does not have any errors.
   2. Correct any errors before you continue to the next step.

For more information about the topics covered in this lesson, visit: