Angular のテンプレート

Angular では、テンプレートはユーザー インターフェイス (UI) のフラグメントの青写真です。テンプレートは HTML で記述され、特別な構文をテンプレート内で使用して、Angular の多くの機能を構築できます。

Angular は、追加機能を使用してテンプレートの HTML 構文を拡張します。
たとえば、Angular のデータ バインディング構文は、ドキュメント オブジェクト モデル (DOM) プロパティを動的に設定するのに役立ちます。

ほとんどすべての HTML 構文は、有効なテンプレート構文です。ただし、Angular テンプレートは UI の一部にすぎないため、<html>、<body>、<base> などの要素は含まれません。

注:-スクリプト インジェクション攻撃のリスクを排除するために、Angular はテンプレートで <script> 要素をサポートしていません。Angular は <script> タグを無視し、ブラウザ コンソールに警告を出力します。詳細については、セキュリティ ページを参照してください。

補間による値の表示

補間とは、マークアップされたテキストに式を埋め込むことを指します。デフォルトでは、補間は二重中括弧 {{ と }} を区切り文字として使用します。

例：

app.component.ts

message = "Here is the initialize message";

<p> {{message}} </p>

例：-

<p>{{title}}</p>
<div><img alt="item" src="{{itemImageUrl}}"></div>

app.component.ts

message = "Here is the initialize message";
getMessage():string{
  return this.message;
}

<p>{{getMessage()}}</p>

テンプレート ステートメントは、ユーザー イベントに応答するために HTML で使用できるメソッドまたはプロパティです。テンプレート ステートメントを使用すると、アプリケーションは、動的コンテンツの表示やフォームの送信などのアクションを通じてユーザーを引き付けることができます。

例：-

(click) = "updateMessage()"
<button (click) = "updateMessage()">Update Message</button>

テンプレート式と同様に、テンプレート ステートメントは JavaScript に似た言語を使用します。ただし、テンプレート ステートメントのパーサーは、テンプレート式のパーサーとは異なります。さらに、テンプレート ステートメント パーサーは、基本的な代入 (=) とセミコロン (;) を使用した連鎖式の両方を特にサポートしています。

次の JavaScript およびテンプレート式の構文は使用できません。

1. 新着
2. インクリメントおよびデクリメント演算子、++ および —
3. += や -= などの演算子の割り当て
4. | などのビット演算子 と ＆
5. パイプオペレーター