Angulerのメモ

ファイル

ファイル名	説明
app.component.ts	アプリで最初に呼び出されるコンポーネント．ルートコンポーネント．
app.module.ts	起動時に呼び出されるモジュール．Angulerの構成要素をまとめる器のようなもの．
index.html	最初のメインページ

データバインディング

データバインディングの種類	記法
補完	[proerty] = "value"
プロパティバインディング	{{...}}
イベントバインディング	{event} = "handler"
双方向バインディング	[(target)] = "value"
属性バインディング	[attr.name] = "exp"
クラスバインディング	[class.name] = "exp"
スタイルバインディング	[style.name] = "exp"

データバインディングの例

// プロパティバインディング
@Component({
  selector: 'my-app',
  template: '<img [src]="image" />'
})

export class AppComponent{
  image = "https://www.google.co.jp/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
}

<!-- 単位付きのスタイルプロパティ -->
<!-- パーセントでフォントサイズを指定する例 -->
<div [style.font-size.%]="size">hoge</div>

<!-- イベントバインディング -->
<input type="button" (click)="show()" value="foo" /> // クリック時
<input type="button" (mouseenter)="show()" value="bar" /> // マウスポインターが要素に入った時
<input type="button" (input)="show($event)" value="foobar" /> // 入力内容が変更された時

// テンプレート参照変数
@Component({
  selector: 'my-app',
  template: `
    <input #txt id="txt" name="txt" type="text" (input)="show(txt.value)" />
    <ul [innerHTML]="msg"></ul>
  `
})

export class AppComponent {
  ...
  show(input: string){
    this.msg = += `<li>${input}</li>`
  }
}

// テンプレート参照変数
template: `
  <input #last type="text" (change)="foo()" />
  <input #first type="text" (change)="bar()" />
  <div>{{last.value}}{{first.value}}</div> // テンプレート内の他の要素から参照
`

<!-- キーイベントのフィルタリング -->
<!-- `Enter`キーが押された時にだけイベントを発生させる -->
<input ... (keyup.enter)="show($event)" />

<!-- 双方向バインディング -->
<!-- ngModelディレクティブ -->
<input id="name" name="name" type="text" [ngModel]="myName"  />

「?.」演算子

<!-- `member`が空であるかどうかを確認し，空でない場合，nameにアクセス -->
<div>{{member?.name}}</div>

パイプ

パイプとはテンプレート上に埋め込まれたデータを加工/整形するための仕組み． パイプには次のようなものが存在する．

• lowercase
• uppercase
• titlecase
• slice
• date
• number
• percent
• json
• i18nPlural
• i18nSelect
• async

例

<!-- `price`は式，`currency`はパイプ，`'JPY'`はパイプのパラメータ． -->
{{price | currency: 'JPY'}}

ディレクティブ

ディレクティブ	説明
ngIf	if文
ngSwitch	switch文
ngFor	for文
ngTemplateOutlet	用意されたテンプレートの内容をインポート
ngComponentOutlet	用意されたコンポーネントの内容をインポート
ngStyle	要素にスタイルプロパティを付与
ngClass	クラスを付与
ngPlural	数値に応じて出力を切り替える．

ディレクティブの例

<!-- ディレクティブ名のプリフィックスに`*`が来ることに注意 -->
<div *ngif="show">
  <p>hoge hoge</p>
</div>

<!-- `*ngStyle`ではなくて`[ngStyle]` -->
<div> [ngStyle]="styles"> ... </div>

...

export class AppComponent{
  ...
  // 動的にスタイルを付与することが可能
  get styles() {
    return {
      'background-color': this.back ? '#f00' : '',
      'color': this.fore ? '#fff' : '#000',
    }
  }
}

フォーム

テンプレート駆動型のフォーム

• 検証属性が指定できる
  • required
  • minlength
  • maxlength
  • email
• 検証エラーかあるかどうかをチェック
  • フォーム名.invalid

フォームの状態検知

// 検証項目単位でエラーの有無をチェック
入力要素名.erros.検証型 // 検証型には`required`, `minlength`...などが当てはまる

入力要素名.valid
入力要素名.invalid
フォーム名.valid
フォーム名.invalid

.pristine // 変更されていない
.dirty // 更新された
.touched // フォーカスが当たった
.untouched // １度もフォーカスが当たっていない

モデル駆動型のフォーム

1. app.module.tsでReactiveFormsModuleを有効にする．
2. templateに[formGroup]と[formControl]`を記述する．
3. コンポーネントのクラスでFormGroupオブジェクトとFormControlオブジェクトを生成する．

その他メモ

• (ngModelChange)="exp"でデータバインディング時の入力値を加工する
• イベント発生時のマウス/キー情報を取得する
• イベントのバブリングをキャンセルする