概要


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


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

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

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

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

セレクタ使用


Angularマークアップ

テンプレートでHTMLに加えて記述

クラスとテンプレート間で、リアルタイムのデータ連携などができる。

構造ディレクティブ


補間

{{テンプレート式}}

<span>{{ property }}</span>

テンプレート式

  1. 補間の{{ }}
  2. イベント以外のバインディングの=の右の引用符内のこと
    • (注意) イベントバインディングのはテンプレート

主な式

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


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

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

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

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

<a href="https://example.com">リンク</a>

クラスバインディング

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

trueのとき、クラス適用

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

クラス名を指定する場合

<span [class]="property"></span>

スタイルバインディング

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

値のみ指定する場合

<span [style.font-size]="property"></span>

スタイル名と値の組み合わせの場合

<span [style]="property"></span>

イベントバインディング

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

<div (click)="foo = 'abc'; myEvent($event)">クリック</div>

$eventオブジェクト

テンプレート文


テンプレート参照変数

#変数

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

条件付き要素

*ngIf="条件"

<span *ngIf="property">内容</span>

要素の繰り返し

*ngFor="let 変数 of 配列"

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

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

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