[Angular] Angularテンプレートまとめ チートシート

引用元: Angular - Cheat Sheet

このチートシートの読み方

テンプレート	出力	解説
テンプレートの書き方です。	コンポーネント適用後の出力例です。	解説です。

前提

出力例は、以下のコンポーネントクラスを前提としています。

export class MyCmpComponent {
  firstName: string     = "Jane";
  myAriaRole: string    = "banner";
  isDelightful: boolean = true;
  mySize: int           = 100;
  ponyName: string      = "Seabiscuit";
  employer: Employer;

  readRainbow($event: any): void { /* (snip) */ }
}

Angular テンプレート文法

テンプレート	出力	解説
<input [value]="firstName">	<input value="Jane">	valueプロパティに、firstName式の評価結果をバインドします。
<div [attr.role]="myAriaRole">	<div role="banner">	role属性に、myAriaRole式の評価結果をバインドします。
<div [class.extra-sparkle]="isDelightful">	<div class="extra-sparkle">	extra-sparcleCSSクラスを付与するかどうかを、isDelightful式の評価結果が真値になるかどうかにバインドします。
<div [style.width.px]="mySize">	<div style="width:100px">	widthプロパティにmySize式の評価結果をバインドします。単位pxはオプションです。
<button (click)="readRainbow($event)">	<button onClick="readRainbow($event)">	クリック時にreadRainbowメソッドを呼び出します。
<div title="Hello {{ponyName}}">	<div title="Hello Seabuscuit">	プロパティに補完文字列をバインドします。 <div [title]="'Hello ' + ponyName"> と一緒です。
<p>Hello {{ponyName}}</p>	<p>Hello Seabuscuit</p>	コンテンツを補完文字列にバインドします。
<my-cmp [(title)]="name">		双方向（ツーウェイ）データバインディングです。 <my-cmp [title]="name" (titleChange)="name=$event"> と同じです。
<video #movieplayer ...><button (click)="movieplayer.play()"></video>		video要素を格納したmovieplayerというローカル変数を生成します。ローカル変数は、同じテンプレート中のデータバインディングやイベントバインディング式で使用できます。
<p *myUnless="myExpression">...</p>		<ng-template [myUnless]="myExpression"><p>...</p></ng-template>と同じです。
<p>Card No.: {{cardNumber ｜ myCardNumberFormatter}}</p>1		myCardNumberFormatterフィルタを通して出力します。
<p>Employer: {{employer?.companyName}}</p>		employerがundefinedでもエラーにならないようにします。

1. Markdownのエスケープがわからなかったので、パイプを全角で記載しています。 ↩