adev/src/content/tutorials/first-app/steps/05-inputs/README.md
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.
Your app's HousingLocation template has a HousingLocation property to receive input.
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.
<docs-workflow> <docs-step title="Import the input() function"> In the code editor, import the `input` helper method from `@angular/core` into the `HousingLocation` component. <docs-code header="Import input in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[1]"/> </docs-step> <docs-step title="Add the Input property"> Add a required property called `housingLocation` and initialize it using `input.required()` with the type `HousingLocationInfo`. <docs-code header="Declare the input property in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[12]"/>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.
SUMMARY: In this lesson, you created a new input property. You also used the .required method to ensure the signal value is always defined.