概要


コンポーネントを構成するファイル


ng generate component: コンポーネント追加

component=new-page
ng generate component $component --project $PROJECT

コンポーネントの組み込み方法

ルーティングモジュール使用

セレクタ使用


クラスとテンプレートのデータ連携

Angularマークアップ


補間

{{テンプレート式}}

<span>{{ property }} <= クラスのプロパティを参照</span>

テンプレート式: JavaScript式の一部を使える


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

[DOMプロパティ]="テンプレート式"

<a [href]="property">リンク</a>

クラスバインディング

[class.クラス]="テンプレート式"

<span [class.クラス]="property"></span>
<span [class]="property"></span>

静的なclass属性 (バインディングではない)

<span class="クラス1 クラス2"></span>

スタイルバインディング

[style.スタイル]="テンプレート式"

<span [style.スタイル]="property"></span>
<span [style]="スタイル表現"></span>

イベントバインディング

(イベント)="テンプレート文"

<button (click)="foo = 'abc'; bar = 1">クリック</button>

テンプレート文


テンプレート参照変数

#変数

<input type="text" #myinput (keyup)="send($myinput)">
<p>{{myinput.value}}</p>

構造ディレクティブ

*ngIf="条件文"

<span *ngIf="x">xがtrueならDOMに要素追加</span>

*ngFor="let 要素 of 配列"

<ol><li *ngFor="let e of array">{{ e }}</li></ol>

属性バインディング(例外的使用)

[attr.HTML属性]="テンプレート式"


テンプレート式

主な式

コンパイルエラーになるもの


親から子へデータを渡す

子クラス: @Inputデコレートしたプロパティ

@Input uniqueName
@Input('child-property') property // 親から見える名前を変えるとき
@Input sample

親テンプレート: 子セレクタでプロパティバインディングなどする

<子セレクタ [uniqueName]="parentProperty"
 [child-property]="parentProperty"
 sample="これは固定値を渡している"></子セレクタ>

子のイベントを親へ伝える

子クラス: @OutputデコレートしたEventEmitteremit()

@Output('child-event') event = new EventEmitter<string>() // stringを渡す場合
send(value) {
  this.event.emit(value) // イベント発生
}

子テンプレート: イベントバインディングなど

<input #input>
<button (click)="send(input.value)">入力文字列を親に送信</button>

親テンプレート: 子セレクタでイベントバインディングし、$eventで受け取る

<子セレクタ (child-event)="fromChild = $event"></子セレクタ>
<p>子から受信: {{fromChild}}</p>