diff --git a/aio-ja/content/guide/attribute-binding.en.md b/aio-ja/content/guide/attribute-binding.en.md new file mode 100644 index 0000000000..ce0cfb4346 --- /dev/null +++ b/aio-ja/content/guide/attribute-binding.en.md @@ -0,0 +1,73 @@ +# Attribute binding + +Attribute binding in Angular helps you set values for attributes directly. +With attribute binding, you can improve accessibility, style your application dynamically, and manage multiple CSS classes or styles simultaneously. + +
+ +See the for a working example containing the code snippets in this guide. + +
+ +## Prerequisites + +- [Property Binding](guide/property-binding) + +## Syntax + +Attribute binding syntax resembles [property binding](guide/property-binding), but instead of an element property between brackets, you precede the name of the attribute with the prefix `attr`, followed by a dot. +Then, you set the attribute value with an expression that resolves to a string. + + + +<p [attr.attribute-you-are-targeting]="expression"></p> + + + +
+ +When the expression resolves to `null` or `undefined`, Angular removes the attribute altogether. + +
+ +## Binding ARIA attributes + +One of the primary use cases for attribute binding is to set ARIA attributes. + +To bind to an ARIA attribute, type the following: + + + + + +## Binding to `colspan` + +Another common use case for attribute binding is with the `colspan` attribute in tables. Binding to the `colspan` attribute helps you to keep your tables programmatically dynamic. Depending on the amount of data that your application populates a table with, the number of columns that a row spans could change. + +To use attribute binding with the `` attribute `colspan` + +1. Specify the `colspan` attribute by using the following syntax: `[attr.colspan]`. +1. Set `[attr.colspan]` equal to an expression. + +In the following example, you bind the `colspan` attribute to the expression `1 + 1`. + + + +This binding causes the `` to span two columns. + +
+ +Sometimes there are differences between the name of property and an attribute. + +`colspan` is an attribute of ``, while `colSpan` with a capital "S" is a property. +When using attribute binding, use `colspan` with a lowercase "s". + +For more information on how to bind to the `colSpan` property, see the [`colspan` and `colSpan`](guide/property-binding#colspan) section of [Property Binding](guide/property-binding). + +
+ +## What’s next + +- [Class & Style Binding](guide/class-binding) + +@reviewed 2022-05-02 diff --git a/aio-ja/content/guide/attribute-binding.md b/aio-ja/content/guide/attribute-binding.md index 254374d74b..b650303671 100644 --- a/aio-ja/content/guide/attribute-binding.md +++ b/aio-ja/content/guide/attribute-binding.md @@ -1,22 +1,22 @@ -# Attribute binding +# 属性バインディング {@a attribute-binding} -Attribute binding in Angular helps you set values for attributes directly. -With attribute binding, you can improve accessibility, style your application dynamically, and manage multiple CSS classes or styles simultaneously. +Angular での属性バインディングは、属性に直接値を設定するのに役立ちます。 +属性バインディングを使用することで、アクセシビリティの改善や、アプリケーションのスタイルを動的に変更し、複数の CSS クラスやスタイルを同時に管理することができます。
-See the for a working example containing the code snippets in this guide. +このガイドのコードスニペットを含む動作例については、をご覧ください。
-## Prerequisites +## 前提条件 -* [Property Binding](guide/property-binding) +- [プロパティバインディング](guide/property-binding) -## Syntax +## 構文 -Attribute binding syntax resembles [property binding](guide/property-binding), but instead of an element property between brackets, you precede the name of the attribute with the prefix `attr`, followed by a dot. -Then, you set the attribute value with an expression that resolves to a string. +属性バインディングの構文は[プロパティバインディング](guide/property-binding)に似ていますが、要素のプロパティをブラケットで囲むのではなく、属性名の前に `attr` のプレフィックスを付け、続けてドットを付けます。 +そして、文字列に解決する式を使用して属性値を設定します。 @@ -26,47 +26,47 @@ Then, you set the attribute value with an expression that resolves to a string.
-When the expression resolves to `null` or `undefined`, Angular removes the attribute altogether. +式が `null` または `undefined` に解決する場合、Angular は属性を完全に削除します。
-## Binding ARIA attributes +## ARIA 属性のバインディング -One of the primary use cases for attribute binding is to set ARIA attributes. +属性バインディングの主な用途の 1 つは ARIA 属性を設定することです。 -To bind to an ARIA attribute, type the following: +ARIA 属性にバインドするには、次のように入力します。 -## Binding to `colspan` +## `colspan`にバインディング -Another common use case for attribute binding is with the `colspan` attribute in tables. Binding to the `colspan` attribute helps you to keep your tables programmatically dynamic. Depending on the amount of data that your application populates a table with, the number of columns that a row spans could change. +属性バインディングのもう 1 つの一般的な使用例は、テーブルの `colspan` 属性です。`colspan` 属性へのバインディングは、テーブルを動的に保つのに役立ちます。 アプリケーションがテーブルに入力するデータ量に応じて、行がまたがる列の数が変わる可能性があります。 -To use attribute binding with the `` attribute `colspan` -1. Specify the `colspan` attribute by using the following syntax: `[attr.colspan]`. -1. Set `[attr.colspan]` equal to an expression. +属性バインディングを `` 属性 `colspan` と共に使用するには、次のようにします。 +1. `colspan`属性は、次の構文で指定します:`[attr.colspan]`。 +1. `[attr.colspan]`に式を設定します。 -In the following example, you bind the `colspan` attribute to the expression `1 + 1`. +次の例では、colspan 属性を 1 + 1 の式にバインディングしています。 -This binding causes the `` to span two columns. +このバインディングによって、`` は 2 つのカラムに分かれます。
-Sometimes there are differences between the name of property and an attribute. +プロパティと属性の名称が異なる場合があります。 -`colspan` is an attribute of ``, while `colSpan` with a capital "S" is a property. -When using attribute binding, use `colspan` with a lowercase "s". +`colspan`は``の属性であり、`colSpanは`大文字の"S"があるプロパティです。 +属性バインディングを使用する時は小文字の"s"を使用して、colspan を使用してください。 -For more information on how to bind to the `colSpan` property, see the [`colspan` and `colSpan`](guide/property-binding#colspan) section of [Property Binding](guide/property-binding). +さらに詳しい情報については[プロパティバインディング](guide/property-binding)の[`colspan` と `colSpan`](guide/property-binding#colspan)のセクションを参照してください。
-## What’s next +## 次のお勧め -* [Class & Style Binding](guide/class-binding) +- [クラスとスタイルのバインディング](guide/class-binding) @reviewed 2022-05-02