How to set default selected value in angualr2 dropdown using ng-select?

Question

I used the angular2 drop-down list for multiple values ​​using the following code:

<ng-select [options]="dropDownSKUNumber" #SKUNumberDrp multiple="true" placeholder="Select SKU Number" [allowClear]="true"></ng-select> 

This code works correctly for me while saving multiple values. Then, but in view mode, I want the default values ​​in the selected drop-down list mode, but I can’t do this.

How to solve it? using the above code.

Answer 1

Since you are using parameters, you should use this ng2-select . In this case, you should bind it to ngModel , and then update this value when initializing your script:

those. HTML

 <ng-select [multiple]="true" [options]="myOptions" [(ngModel)]="mySelectValue"> </ng-select> 

TS

 export class App implements OnInit { myOptions: Array<any>; mySelectValue: Array<string>; // Array of strings for multi select, string for single select. ngOnInit() { this.myOptions = [ {value: 'a', label: 'Alpha'}, {value: 'b', label: 'Beta'}, {value: 'c', label: 'Gamma'}, ]; this.mySelectValue = ['b', 'c']; } } 

Answer 2

According to angular2 select , you can use ngModel to set the initial value:

you can use options as an array and ngModle for the selected value in your component, as shown below:

 //Component public dropDownSKUNumber : any[] = [ { value: 1, label : 1 }, { value: 2, label : 2 }, { value: 3, label : 3 } ]; public selectedValue: string[] = [ '2', '3' ]; //HTML <ng-select [options]="dropDownSKUNumber" #SKUNumberDrp multiple="true" placeholder="Select SKU Number" [(ngModel)]="selectedValue" [allowClear]="true"></ng-select>