From 7900d0844451a5f73880229be451996b76ab318c Mon Sep 17 00:00:00 2001 From: Darkss Date: Thu, 13 Aug 2026 09:14:18 +0900 Subject: [PATCH 1/2] =?UTF-8?q?06-property-binding=E3=81=AE=E5=92=8C?= =?UTF-8?q?=E8=A8=B3=E3=82=92=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../steps/06-property-binding/README.en.md | 50 +++++++++++++++++++ .../steps/06-property-binding/README.md | 46 ++++++++--------- 2 files changed, 73 insertions(+), 23 deletions(-) create mode 100644 adev-ja/src/content/tutorials/first-app/steps/06-property-binding/README.en.md 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..f4422ec2ff 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: +このレッスンで扱った内容について、さらに詳しく知りたい場合は次のページをご覧ください: - + From 33d58b52ce4f3af322ce1c3fc1ffec49ae18db09 Mon Sep 17 00:00:00 2001 From: Darkss Date: Thu, 13 Aug 2026 20:42:25 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E5=92=8C=E8=A8=B3=E3=82=92=E4=B8=80?= =?UTF-8?q?=E7=AE=87=E6=89=80=E4=BF=AE=E6=AD=A3(=E3=82=B3=E3=83=B3?= =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AE=E3=83=97?= =?UTF-8?q?=E3=83=AD=E3=83=91=E3=83=86=E3=82=A3=E3=81=AE=E5=90=8D=E3=81=A7?= =?UTF-8?q?=E3=81=99=3D>=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D?= =?UTF-8?q?=E3=83=B3=E3=83=88=E3=81=AE=E3=83=97=E3=83=AD=E3=83=91=E3=83=86?= =?UTF-8?q?=E3=82=A3=E5=90=8D=E3=81=A7=E3=81=99)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tutorials/first-app/steps/06-property-binding/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 f4422ec2ff..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 @@ -30,7 +30,7 @@ コンポーネントタグにプロパティバインディングを追加する際には、`[attribute] = "value"`という構文を使います。これは割り当てた値を文字列ではなくコンポーネントクラスのプロパティとして扱うようAngularに指示するためのものです。 - 右辺の値は`Home`コンポーネントのプロパティの名です。 + 右辺の値は`Home`コンポーネントのプロパティ名です。