AngularでjQuery-Select2実装。マルチselectやデフォルト値も

2019-09-162019-09-23

jQueryのselect2は非常に便利なライブラリである。selectボックスに検索などつけてくれる優れもの。
https://select2.org/

Angularでの実装

まずはjQueryとselect2をインストール。

npm install --save jquery select2

そしてソースファイルの読み込みを設定。（angular.json）

"styles": [
"node_modules/select2/dist/css/select2.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/select2/dist/js/select2.min.js"
]

さらにselect2のAngularラッパーライブラリもインストール。(ng2-select2)

npm install --save ng2-select2

app.module.tsに以下を追加

import { Select2Module } from 'ng2-select2';
@NgModule({
imports: [
Select2Module
],
})

あとは、以下の通り実装すれば動く。

<select2
  [data]="selectData"
></select2>

import { Select2OptionData } from 'ng2-select2';
selectData: Array = [
    {
      id: '1',
      text: 'ほげ'
    },
    {
      id: '2',
      text: 'ふが'
    }
  ];
}

Multi-select boxesの場合

multi-selectの場合は、以下のように「multiple: true」のoptionを追加する。

<select2
  [data]="selectData"
  [options]="selectOptions"
></select2>

import { Select2OptionData } from 'ng2-select2';
  selectOptions = {
    multiple: true
  }
}

Default値をセットするには

デフォルト値もしくは外から値をセットしたい場合は[value]にセットする。

<select2
  [data]="selectData"
  [value]="defaultValue"
></select2>

import { Select2OptionData } from 'ng2-select2';
  defaultValue = ['1'] //ここはdataのidを指定
}

しかしselect2は素晴らしい！。こんな便利なUIライブラリはあまりないだろう。