Javascriptこの記事ではngModelを利用せずに、カスタムコンポーネントで双方向バインディングを実現する方法を解説します。syntaxを用いることで、双方向バインディングを簡単に実装することが可能です。syntaxとは[(ngModel)]を利用する際に見かける記法、[()]の事を指します。[()]記法は、Angularが備えているテンプレート構文の一種で、プロパティバインディングとイベントバインディングを組み合わせたものと同様の振る舞いをします。(valueChange)="text=$event"></my-component>カスタムコンポーネントの実装例ここでは要素がクリックされた際に[()]へ指定された変数が更新されるカスタムコンポーネントを考えます。カスタムコンポーネントを実装します。}}上記で実装したカスタムコンポーネントを、利用したいコンポーネントから呼び出します。Component!が表示されます。clicked!がセットされ画面上に表示されます。'';にてvalueを受け取ります。カスタムコンポーネントはvalueが更新された際、それを親へ伝達するためthis.valueChange.emit(this.value);を呼び出します。[(value)]記法を用いる場合、カスタムコンポーネント側の@Input()プロパティ名にChangeサフィックスを追加した変数名を、@Outputプロパティとして設定すれば良いわけです。>【Angular】カスタムコンポーネントで双方向バインディングを実装する【v8.x】Taketiyoプログラミング、筋トレが大好きです。4~5年にわたりWeb関係のシステム開発全般に携わっており、現在は某コミュニティにおいて技術トップとして携わっています。Angular(Javascript)を使ってWebサービスを作るのが得意です。