詳細ガイド
テンプレート

式構文

Angular式はJavaScriptに基づいていますが、いくつかの重要な点で異なります。このガイドでは、Angular式と標準JavaScriptの類似点と相違点を説明します。

値リテラル

Angularは、リテラル値のサブセットをJavaScriptからサポートしています。

サポートされる値リテラル

Literal type Example values
String 'Hello', "World"
Boolean true, false
Number 123, 3.14
Object {name: 'Alice'}
Array ['Onion', 'Cheese', 'Garlic']
null null
Template string `Hello ${name}`
Tagged template string tag`Hello ${name}`

サポートされていないリテラル

Literal type Example value
RegExp /\d+/
Tagged template string tag`Hello ${name}`

グローバル

Angular式は、次のグローバルをサポートしています。

その他のJavaScriptグローバルはサポートされていません。一般的なJavaScriptグローバルには、NumberBooleanNaNInfinityparseIntなどがあります。

ローカル変数

Angularは、特定のコンテキストで式に使用できる特別なローカル変数を自動的に用意します。これらの特別な変数は、常にドル記号文字($)で始まります。

たとえば、@forブロックはループに関する情報に対応する複数のローカル変数($indexなど)を提供します。

どのような演算子がサポートされていますか?

サポートされる演算子

Angularは、標準JavaScriptの次の演算子をサポートしています。

演算子 例(複数)
加算/連結 1 + 2
減算 52 - 3
乗算 41 * 6
除算 20 / 4
余り(剰余) 17 % 5
Exponentiation 10 ** 3
括弧 9 * (8 + 4)
条件式(三項演算子) a > b ? true : false
論理積 &&
論理和 ||
論理否定 !
Nullish Coalescing possiblyNullValue ?? 'default'
比較演算子 <, <=, >, >=, ==, ===, !==
Unary Negation -x
Unary Plus +y
Property Accessor person['name']
typeof typeof 42
void void 1
in 'model' in car

Angular式は、さらに次の非標準の演算子もサポートしています。

演算子 例(複数)
パイプ {{ total | currency }}
オプショナルチェーン* someObj.someProp?.nestedProp
非nullアサーション(TypeScript) someObj!.someProp

NOTE: オプショナルチェーンは、標準JavaScriptバージョンとは異なる動作をします。Angularのオプショナルチェーン演算子の左辺がnullまたはundefinedの場合、undefinedではなくnullを返します。

サポートされていない演算子

演算子 例(複数)
すべてのビット演算子 &, &=, ~, |=, ^=, etc.
代入演算子 =
オブジェクトのデストラクタリング const { name } = person
配列のデストラクタリング const [firstItem] = items
カンマ演算子 x = (x++, x)
in 'model' in car
typeof typeof 42
void void 1
instanceof car instanceof Automobile
new new Car()

式の字句コンテキスト

Angular式は、コンポーネントクラスのコンテキストと、関連するテンプレート変数、ローカル変数、およびグローバル変数のコンテキストで評価されます。

When referring to component class members, this is always implied. However, if a template declares a template variables with the same name as a member, the variable shadows that member. You can unambiguously reference such a class member by explicitly using this.. This can be useful when creating an @let declaration that shadows a class member, e.g. for signal narrowing purposes.

宣言

一般的に、Angular式では宣言はサポートされていません。これには、以下が含まれますが、これらに限定されません。

宣言 例(複数)
変数 let label = 'abc', const item = 'apple'
関数 function myCustomFunction() { }
アロー関数 () => { }
クラス class Rectangle { }

イベントリスナー文

イベントハンドラーは、ではなくです。Angular式と同じ構文をすべてサポートしていますが、2つの重要な違いがあります。

  1. 文は代入演算子をサポートします(ただし、分割代入はサポートされていません)。
  2. 文はパイプをサポートしていません