diff --git a/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.en.md b/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.en.md new file mode 100644 index 0000000000..88018aa078 --- /dev/null +++ b/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.en.md @@ -0,0 +1,50 @@ +# Add a property binding to a component’s template + +This tutorial lesson demonstrates how to add property binding to a template and use it to pass dynamic data to components. + + + +## What you'll learn + +- Your app has data bindings in the `Home` template. +- Your app sends data from the `Home` to the `HousingLocation`. + +## Conceptual preview of Inputs + +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 using 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/templates/binding#css-class-and-style-property-bindings) guide. + + + + +This step adds property binding to the `` tag. + +In the code editor: + +1. Navigate to `src/app/home/home.ts` +1. In the template property of the `@Component` decorator, update the code to match the code below: + + + 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-hand side is the name of the property from the `Home`. + + + + +1. Save your changes and confirm the app does not have any errors. +1. Correct any errors before you continue to the next step. + + + + +SUMMARY: In this lesson, you added a new property binding and passed in a reference to a class property. Now, the `HousingLocation` has access to data that it can use to customize the component's display. + +For more information about the topics covered in this lesson, visit: + + + + diff --git a/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.md b/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.md index 88018aa078..3ab03c6ec3 100644 --- a/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.md +++ b/adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.md @@ -1,50 +1,50 @@ -# Add a property binding to a component’s template +# コンポーネントのテンプレートにプロパティバインディングを追加する -This tutorial lesson demonstrates how to add property binding to a template and use it to pass dynamic data to components. +このチュートリアルレッスンではテンプレートにプロパティバインディングを追加する方法とコンポーネントに動的データを渡すための使用方法を紹介します。 -## What you'll learn +## 何を学ぶか -- Your app has data bindings in the `Home` template. -- Your app sends data from the `Home` to the `HousingLocation`. +- アプリケーションの`Home`テンプレートにデータバインディングが追加されます。 +- アプリケーションが`Home`から`HousingLocation`にデータを送れるようになります。 -## Conceptual preview of Inputs +## inputプロパティのコンセプト概要 -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 using 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`. +プロパティバインディングを使うと、Angularテンプレート内で変数を`Input`プロパティに結びつけることができます。こうして渡されたデータは`Input`に動的にバインドされます。 -For a more in depth explanation, please refer to the [Property binding](/guide/templates/binding#css-class-and-style-property-bindings) guide. +より詳しい説明は、ガイドの[プロパティバインディング](/guide/templates/binding#css-class-and-style-property-bindings)を参照してください。 - -This step adds property binding to the `` tag. + +このステップでは、``タグにプロパティバインディングを追加します。 -In the code editor: +コードエディタで、 -1. Navigate to `src/app/home/home.ts` -1. In the template property of the `@Component` decorator, update the code to match the code below: - +1. `src/app/home/home.ts`に移動します +1. `@Component`のテンプレートプロパティで、以下のコードと同じ内容になるよう更新します。 + - 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. + コンポーネントタグにプロパティバインディングを追加する際には、`[attribute] = "value"`という構文を使います。これは割り当てた値を文字列ではなくコンポーネントクラスのプロパティとして扱うようAngularに指示するためのものです。 - The value on the right-hand side is the name of the property from the `Home`. + 右辺の値は`Home`コンポーネントのプロパティ名です。 - -1. Save your changes and confirm the app does not have any errors. -1. Correct any errors before you continue to the next step. + +1. 変更を保存し、アプリケーションにエラーがないことを確認します。 +1. 次のステップに進む前に、エラーがあれば修正します。 -SUMMARY: In this lesson, you added a new property binding and passed in a reference to a class property. Now, the `HousingLocation` has access to data that it can use to customize the component's display. +SUMMARY: このレッスンでは、新しいプロパティバインディングを追加し、クラスプロパティへの参照を渡しました。これにより、`HousingLocation`はコンポーネントの表示をカスタマイズするために利用可能なデータにアクセスできるようになりました。 -For more information about the topics covered in this lesson, visit: +このレッスンで扱った内容について、さらに詳しく知りたい場合は次のページをご覧ください: - +