How to use select2 in Angular 6?

问题

I need to use "select2" in angular 6 for autocomplete. Who's ever use it before? , help me please.

回答1:

You can use ng2-select2

Angular wrapper for Select2 (ng2-select2)

回答2:

1.If you are using bootstrap then use typeahead feature of bootstrap

https://ng-bootstrap.github.io/#/components/typeahead/examples

2.If material then use autocomplete

https://material.angular.io/components/autocomplete/examples

回答3:

you can do this in Two ways

case1: with JQuery by adding an Id to select tag

<select select2 style="width:100%;" class="select2" id="symbolId" [(ngModel)]="selectedContractDetails.name">
        <option *ngFor="let symbol of service.symbols" value="{{symbol}}">{{symbol}}</option>
    </select>

In your ngAfterViewInit()

ngAfterViewInit(){
   $('#symbolId').on('change', (event) => {
       var symbolSelected= event.target.value;
       //you can use the selected value
   });
}

case2: with JQuery and select2 Official Library methods

ngAfterViewInit(){
   $('.select2').on('select2:select', (event) => {
       // Code you want to execute when you hit enter in select2 input box   
   });
}

来源：https://stackoverflow.com/questions/52831273/how-to-use-select2-in-angular-6