Add an input parameter to the component

This tutorial lesson demonstrates how to create a component input and use it to pass data to a component for customization.

What you'll learn

Your app's HousingLocation template has a HousingLocation property to receive input.

Conceptual preview of Inputs

Inputs allow components to specify data that can be passed to it from a parent component.

In this lesson, you'll define an input property in the HousingLocation component that enables you to customize the data displayed in the component.

Learn more in the Accepting data with input properties and Custom events with outputs guides.

1. Import the input() function

   In the code editor, import the input helper method from @angular/core into the HousingLocation component.

   Import input in housing-location.ts

   import {Component, input} from '@angular/core';import {HousingLocationInfo} from '../housinglocation';@Component({  selector: 'app-housing-location',  template: ` <p>housing-location works!</p> `,  styleUrls: ['./housing-location.css'],})export class HousingLocation {  housingLocation = input.required<HousingLocationInfo>();}

2. Add the Input property

   Add a required property called housingLocation and initialize it using input.required() with the type HousingLocationInfo.

   Declare the input property in housing-location.ts

   import {Component, input} from '@angular/core';import {HousingLocationInfo} from '../housinglocation';@Component({  selector: 'app-housing-location',  template: ` <p>housing-location works!</p> `,  styleUrls: ['./housing-location.css'],})export class HousingLocation {  housingLocation = input.required<HousingLocationInfo>();}

   You have to invoke the required method on input to indicate that the parent component must provide a value. In our example application, we know this value will always be passed in — this is by design. The .required() call ensures that the TypeScript compiler enforces this and treats the property as non-nullable when this component is used in a template.

3. Pass data to the input

   Send the housingLocation value from the Home component to the housingLocation property of the HousingLocation component.

   Declare the input property for HousingLocation in home.ts

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