LoginSignup
3

More than 5 years have passed since last update.

Angularで検索可能なセレクトボックスを設置する

Posted at

検索可能なSelectBoxを設置したく調べてみたところ、「Select2」というJQueryプラグインがAngularでも使用可能だったので使ってみました。

こんな感じ
スクリーンショット 2018-09-10 12.22.43.png

準備

  • JQueryとselect2をインストール
    yarn add jquery --save
    yarn add select2 --save

  • angular.jsonに追加

"scripts": [
  "node_modules/jquery/dist/jquery.js",
  "node_modules/select2/dist/js/select2.min.js"
]
  • ng2-select2をインストール
    yarn add ng2-select2 --save

  • ***.module.tsに追加


import { Select2Module } from 'ng2-select2';

@NgModule({
  imports: [
    ...,
    Select2Module
  ],
})

実装

  • ***.component.htmlに追加

<select2 [data]="exampleData"></select2>
  • ***.component.tsにSelectデータを追加
import { Select2OptionData } from 'ng2-select2';

exampleData: Array<Select2OptionData> = [
    {
      id: 'basic1',
      text: 'Basic 1'
    },
    {
      id: 'basic2',
      disabled: true,
      text: 'Basic 2'
    },
    {
      id: 'basic3',
      text: 'Basic 3'
    },
    {
      id: 'basic4',
      text: 'Basic 4'
    }
  ];
}

これで完成です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3