How to use jQuery Select2 with AngularJS

Question

I am trying to use jQuery (2.2.1) Select2 (3.5.2) with Angularjs (1.5) but am having a difficult time grabbing the data from the select box. I have tried ui-select and I co

Answer 1

You can use this plugin ,
ngx-select2

Add jQuery and Select2 lib

If you want to add javascript and css libraries , you msust added from angular.json example :

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

Install ngx-select2

npm i ngx-select2

Use select2 component

import { LSelect2Module } from 'ngx-select2';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    LSelect2Module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

in html

Options

• data: select2 init data for select
• options: select2 options
• disabled: disable select2 component
• valueChange: output. Fire on value change, same as ngModelChange