1. Next, open `first-app/src/app/app.ts`.

1. In `app.ts`, in the `@Component` definition, replace the `template` line with this code to change the text in the app component.

1. In `app.ts`, in the `App` class definition, replace the `title` line with this code to change the component title.

Then, save the changes you made to `app.ts`.

1. In `app.ts`, in `@Component`, update the `imports` array property and add `Home`.

1. In `app.ts`, in `@Component`, update the `template` property to include the following HTML code.

1. Save your changes to `app.ts`.

1. If `ng serve` is running, the app should update.

1. In the `first-app` directory, open `home.ts` in the editor.

1. In `home.ts`, in `@Component`, update the `template` property with this code.

1. Next, open `home.css` in the editor and update the content with these styles.

1. Next update the `imports` property of the `@Component` metadata by adding `HousingLocation` to the array.

1. Now the component is ready for use in the template for the `Home`. Update the `template` property of the `@Component` metadata to include a reference to the `<app-housing-location>` tag.

</docs-step>

1. In `src/app/home/home.ts`, replace the empty `export class Home {}` definition with this code to create a single instance of the new interface in the component.

<docs-code header="src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[1,36]" />

1. In the browser, click on one of the housing location's "Learn More" links and confirm that the numeric value displayed on the page matches the `id` property for that location in the data.

</docs-step>

Now that routing is working properly in the application this is a great time to update the template of the `Details` to display the specific data represented by the housing location for the route parameter.

To access the data you will add a call to the `HousingService`.

1. In `src/app/housing.service.ts`, inside the `HousingService` class, paste this method at the bottom of the class definition.

1. Confirm that the app builds without error.

Correct any errors before you continue to the next step.

1. After the `import` statements at the top of the file, add the following code to import the Angular form classes.

1. In the `Details` decorator metadata, update the `imports` property with the following code:

1. In the `Details` class, before the `constructor()` method, add the following code to create the form object.

In Angular, `FormGroup` and `FormControl` are types that enable you to build forms. The `FormControl` type can provide a default value and shape the form data. In this example `firstName` is a `string` and the default value is empty string.

1. In the `Details` class, after the `constructor()` method, add the following code to handle the **Apply now** click.

This button does not exist yet - you will add it in the next step. In the above code, the `FormControl`s may return `null`. This code uses the nullish coalescing operator to default to empty string if the value is `null`.

1. In `src/app/home/home.ts`, add new property to the class called `filteredLocationList`.

The `filteredLocationList` hold the values that match the search criteria entered by the user.

1. The `filteredLocationList` should contain the total set of housing locations values by default when the page loads. Update the `constructor` for the `Home` to set the value.

</docs-step>

1. Update the `Home` class to include the implementation of the `filterResults` function.

This function uses the `String` `filter` function to compare the value of the `text` parameter against the `housingLocation.city` property. You can update this function to match against any property or multiple properties for a fun exercise.