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

Question

I have used angular2 drop-down for multiple value using follwing code:

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

This code is working properly for me at the time of save multiple value. Then but in view mode, I want that values by default in selected mode in dropdown, But i can't be able to do this.

How to solve it? using above code.

Answer 1

Since you are using options, you must be using this ng2-select. In this case, you should bind it to an ngModel and then update that value on init of your script:

I.e. 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 initial value :

you can use options as array and ngModle for selected value in your component as 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>