This tutorial lesson demonstrates how to add property binding to a template and use it to pass dynamic data to components.
Time required: expect to spend about 5 minutes to complete this lesson.
This lesson starts with the code from the previous lesson, so you can:
If you haven't reviewed the introduction, visit the Introduction to Angular tutorial to make sure you have everything you need to complete this lesson.
If you have any trouble during this lesson, you can review the completed code for this lesson, in the live example for this lesson.
HomeComponent
template.HomeComponent
to the HousingLocationComponent
.In lesson 5, you added @Input
decorators to properties in the HousingLocationComponent
allow the component to receive data. 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. There are several forms of data binding in Angular, in this lesson you'll use 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.
Perform these steps on the app code in your IDE.
HomeComponent
templateThis step adds property binding to the <app-housing-location>
tag.
In the code editor:
Navigate to src/app/home/home.component.ts
In the template property of the @Component
decorator, update the code to match the code below:
<app-housing-location [housingLocation]="housingLocation"></app-housing-location>
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 handside is the name of the property from the HomeComponent
.
In this lesson, you added a new property binding and passed in a reference to a class property. Now, the HousingLocationComponent
has access to data that it can use to customize the component's display.
If you are having any trouble with this lesson, you can review the completed code for it in the live example.
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/tutorial/first-app/first-app-lesson-06