一人もくもく会 α verでサービス開始しました。
請求書作成システム α verでサービス開始しました。

Angularで自作コンポーネントのngModel双方向バインディング

Angularはinputタグ等のform用タグにて[(ngModel)]属性を使用すると双方向バインディングになる便利な機能がある。

これを自作した独自のコンポーネントで実現する方法。

簡単に言えば下記の解説通り。

blog.thoughtram.io

ざっと説明すると下記の通り。

ControlValueAccessorインターフェイスを使用する

コンポーネントにControlValueAccessorをimplementする。

writeValue

プロパティとして渡された値が来るので処理。

registerOnChange, registerOnTouched

changeとtouchedのコールバック関数が渡されるので、 それを保存しておいてコンポーネントの呼び出し元に返したい時に結果を返す。

providers

Angularにきちんと認識させるためにNG_VALUE_ACCESSORのprovidersを設定しているらしい。

まとめ

上記のような感じでできる。 共通設定などを一切汚さずコンポーネントのみで解決できるところが良い。