Textbox builder listbuilder UIパターンに似たUIパターン

Question

添付の画像に示されているように、リストビルダとほぼ同じようなフリーフォームのテキストボックスビルダーをビルドしようとしています。 フロントエンドhtmlのテキストボックスに値を入力する必要があります。追加ボタンをクリックすると、値が右側のテキストエリアに移動されます。ユーザーは、複数の入力値を追加して、それらをテキストエリアに追加し続けることができるはずです。画像に表示されているリストボックスと同じです。しかし、私はテキストボックスでそれをやりたい助言がありますか？私はこれを行うには、Angular2 TypescriptとHTMLを使用しています。

See Image here

Answer 1

あなたは二つのリストを表す2つの配列を持っていた場合は、同じロジックを実装することはできますか？

2つの配列間でアイテムを移動するためのロジックを実装し、それらの配列のビジュアル表現にAngularを使用する（すなわち、ngForを使用する2つの<select>要素を作成して、 <options>のあなたのリスト）