[Angular マスター] Day 3 - テンプレート構文とデータ表示

テンプレート構文とは

Angularのテンプレートは、HTMLにAngular独自の構文を加えたものです。コンポーネントクラスにあるデータを画面に表示したり、HTML属性に値を渡したりできます。

まず押さえたいのは、Interpolationとプロパティバインディングです。

Interpolation

Interpolationは、コンポーネントの値を画面に表示する基本構文です。

export class UserComponent {
  username = 'Taro';
  age = 25;
}

<p>名前: {{ username }}</p>
<p>年齢: {{ age }}</p>

テンプレート内の{{ }}に式を書くと、その結果が画面に表示されます。

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

HTML属性やDOMプロパティにコンポーネントの値を渡すときは、[property]形式を使います。

<img [src]="profileImageUrl" [alt]="username">
<button [disabled]="isSaving">保存</button>

文字列を固定で書くのではなく、状態に応じて値を変えられるのがポイントです。

クラスとスタイルのバインディング

状態によって見た目を変えたい場合は、クラスやスタイルのバインディングを使います。

<div [class.active]="isActive">
  Status
</div>

<p [style.color]="textColor">
  Message
</p>

フォームの入力状態、選択中のタブ、エラー表示などでよく使います。

Day 3のゴール

今日のゴールは、コンポーネントのデータをテンプレートに表示し、状態に応じて属性や見た目を変える感覚をつかむことです。