This tutorial lesson demonstrates how to create a component input
and use it to pass data to a component for customization.
NOTE: This video reflects an older syntax, but the main concepts remain valid.
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.
-
Import the input() function
In the code editor, import the
input
helper method from@angular/core
and theHousingLocation
component.Import HousingLocation and 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>();}
-
Add the Input property
Add a required property called
housingLocation
and initialize it usinginput.required()
with the typeHousingLocationInfo
.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 invoked the
required
method oninput
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. -
Pass data to the input
Send the
housingLocation
value from theHome
component to thehousingLocation
property of the HousingLocation component.Declare the input property in housing-location.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, };}
SUMMARY: In this lesson, you created a new input
property. You also used the .required
method to ensure the signal value is always defined.