データバインディングngIfおよびngFor組み込みディレクティブなど、さまざまなAngularテンプレート構文の概念の多くについて説明しました。 ここでは、簡単に参照できるように、構文のさまざまな可能性を要約する機会を利用します。

この投稿では、Angular2+のテンプレート構文について説明します

インラインと個別のファイルテンプレート

テンプレートには、セキュリティ上の理由から、 script タグを除いて、ほとんどすべての通常のHTMLを含めることができます。 コンポーネントクラスと同じファイルにインラインでテンプレートを定義できます。

app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>I'm a template!</h1>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor() {}

}

…または、テンプレートを個別のファイルで定義できます。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor() {}

}
app.component.html
<h1>I'm a template!</h1>

これは主に好みの問題であり、インラインテンプレートは多くの場合、小さなコンポーネントに最適です。

データバインディング

テンプレートに関してAngularの力の核となるのは、コンポーネントクラスのデータにバインドする機能、またはイベントにバインドする機能です。 データバインディングは、必要なフレーバーに応じて異なる方法で実行されます。

補間

コンポーネントの値を代入するには、補間バインディングを使用します。

<span>User name: {{ name }}</span>

補間構文は、式を評価することもできます。 以下はHelloyouを出力します。

<span>
  Hello {{ 1 + 1 === 3 ? 'me' : 'you' }}
</span>

補間式で使用できる3つの新しい演算子があります。

  • 安全なナビゲーション演算子 ?. は、nullまたは未定義のオブジェクトの値にアクセスしようとした場合にJavaScriptエンジンが文句を言うのを防ぎます。 アクセスしようとしているプロパティがnullまたは未定義の値である場合、エラーを発生させるのではなく、ステートメントは単に無視されます。
{{ user?.preferences?.avatar }}
{{ user?.name | uppercase }}
  • 非nullアサーション演算子 !. は、nullまたは未定義の値が検出された場合にエラーアウトしないようにTypeScript型チェッカーに通知します。 これは、TypeScriptに –strictNullChecksフラグを使用している場合にのみ使用してください。
{{ user!.preferences!.nickName | uppercase }}

値を変更したり、副作用のある式を使用することはできません。 たとえば、補間された式で変数を割り当てることはできません。

プロパティバインディング

コンポーネントのデータを要素のプロパティにバインドできます。 たとえば、ここで user は、nameプロパティを持つコンポーネントクラスのオブジェクトであるとします。

<input type="text" [value]="user.name">

イベントバインディング

(event)=“ method()” 構文を使用して、ユーザーイベントをコンポーネントクラスのメソッドにバインドします。

<button type="button" (click)="showProfile()">View Profile</button>

双方向バインディング

テンプレートからコンポーネントに、またコンポーネントからテンプレートにデータを流す場合は、双方向バインディングを使用できます。

<input type="text" [(ngModel)]="user.name">

これにより、入力の値の変更はユーザーオブジェクトのnameプロパティに反映され、コンポーネントに user.name の値を変更するメソッドがある場合、結果も入力に反映されます。自動的。

双方向のデータバインディング構文を使用するには、ルートモジュールにFormsModuleをインポートする必要があることに注意してください。

スタイルとクラスのバインド

テンプレートのスタイルまたはクラスにバインドするには、主に4つの方法があります。

スタイルプロパティバインディング

通常のプロパティバインディング構文を使用して、特定のスタイルプロパティの値を定義できます。

<span [style.background-color]="'pink'">{{ user.name }}</span>

…または、次のようなものを使用して、コンポーネントの値にバインドできます。

<span [style.background-color]="user.color">{{ user.name }}</span>

ngStyle属性ディレクティブ

ngStyle 属性ディレクティブを使用して、一度に複数のスタイルプロパティを適用できます。

<p [ngStyle]="userStyles">
  {{ user.name }}
</p>

そして、ここでコンポーネントのuserStyleは次のようになります。

userStyles = {
  backgroundColor: 'papayawhip',
  border: '2px solid #666',
  width: '50%',
  margin: '0 auto',
  textAlign: 'center',
  padding: '2rem'
};

クラスプロパティバインディング

スタイルプロパティバインディングに似ていますが、式がtrueと評価された場合にクラスを適用します。 この例では、ユーザーオブジェクトにcolorプロパティがある場合、spanのクラスはhighlightになります。

<span [class.highlight]="user.color">{{ user.name }}</span>

ngClass属性ディレクティブ

ngStyle属性ディレクティブに似ており、一度に複数のクラスを設定できます。

<p [ngClass]="setClasses()">
  {{ user.name }}
</p>

そして、コンポーネントクラスでは:

setClasses() {
  const classes = {
    'has-avatar': this.user.avatar,
    'new-user': this.user.newUser,
    bg: this.user.preferences.color
  };
  return classes;
}

ngClass が期待するオブジェクトのプロパティ名は、その値がtrueと評価された場合、適用されるクラス名になります。

テンプレートリファレンス

要素がテンプレート内から他の要素にアクセスできるようにするために、テンプレート参照変数と呼ばれる要素上に参照変数を作成できます。 記号の後に一意の識別子名を付けるだけです。

<input type="text" #color placeholder="Hex color value">
<button (click)="printValue(color.value)">
  Show color
</button>

パイプ

パイプを使用して、補間された値に対して単純な変換を行います。 以下は、2017年8月8日火曜日のような形式で日付値を保持するプロパティをフォーマットします。

<span>
  Published: {{ publishedDate | date:'fullDate' }}
</span>

構造指令

Angularは、DOMの要素に影響を与える3つの組み込み構造ディレクティブを提供します。

ngIf

ngIf ディレクティブに渡された式がtrueと評価された場合、要素はDOMに追加され、それ以外の場合はDOMから削除されます。

<span *ngIf="publishedDate">
  Published: {{ publishedDate | date:'fullDate' }}
</span>

Angular 4以降、式がfalseと評価された場合に使用されるテンプレートへの参照を使用してelse句を定義することもできます。

<span *ngIf="publishedDate; else noPublishedDate">
  Published: {{ publishedDate | date:'fullDate' }}
</span>
<ng-template #noPublishedDate>
  😿 No published date
</ng-template>

ngFor

テンプレートのforループのように、 ngFor は配列内の値を反復処理し、各アイテムにアタッチされている要素のコピーを作成します。 この例では、 users は、コンポーネントクラスで使用できるユーザーオブジェクトの配列です。

<ul>
  <li *ngFor="let user of users">
    name: {{ user.name }}, email: {{ user.email }}
  </li>
</ul>

indexをx構文として使用して反復インデックスを取得することもできます。

<ul>
  <li *ngFor="let user of users; index as i">
    {{ i + 1 }}- name: {{ user.name }}, email: {{ user.email }}
  </li>
</ul>

ngSwitch

複数の可能な値が評価されるswitchステートメントと同等ですが、テンプレートの場合は次のようになります。

<div [ngSwitch]="user.gender">
  <span *ngSwitchCase="'m'">Male</span>
  <span *ngSwitchCase="'f'">Female</span>
  <span *ngSwitchDefault>Not provided</span>
</span>