インストール方法

html

<head>
  <meta charset="utf-8">
  <title>Ng2Select2Demo</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="./assets/jquery.min.js"></script>        
  <script src="./assets/select2.min.js"></script>
</head>

npm

$ npm i -S ng2-select2

app.module.ts

 import { Select2Module } from 'ng2-select2';

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

実装方法

ベーシック

basic.component.html

<h2>1. Basic demo</h2>

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

basic.component.ts

import { Component, OnInit } from '@angular/core';
import { Select2OptionData } from 'ng2-select2';

@Component({
  selector: 'app-basic',
  templateUrl: './basic.component.html',
  styleUrls: ['./basic.component.css']
})
export class BasicComponent implements OnInit {
  public exampleData: Array<Select2OptionData>;

  ngOnInit() {
    this.exampleData = [
      {
        id: 'basic1',
        text: 'Basic 1'
      },
      {
        id: 'basic2',
        disabled: true,
        text: 'Basic 2'
      },
      {
        id: 'basic3',
        text: 'Basic 3'
      },
      {
        id: 'basic4',
        text: 'Basic 4'
      }
    ];
  }
}

Angular2でselect2を使う方法

インストール方法

実装方法

ベーシック

参考