How to set default values in ng-select in angular6?

Question

I am using angular6 multi-select which have a list of items coming in an array of objects from angular service on ngOnInit like this which is passing into multi-select :

this.sensorTypes = [
  { label : "Power", value : "P"},
  { label : "Current", value : "C"},
  { label : "Voltage", value : "V"}
]

I want to set 2 values by default in multi-select when form will load. For this i am binding ngModel on multi-selectand in that variable i am setting values on ngOnInit like this

this.selectedAttributes = [
  {label : "Current", value : "C"},
  {label : "Voltage", value : "V"}
]

In my component.html i am creating multi-select like this :

<div class="form-group row">
  <div class="col-sm-10">
    <ng-select 
       [ngClass]="'ng-select'" 
       [(ngModel)]="selectedAttributes" 
       [ngModelOptions]="{standalone: true}" 
       [options]="sensorTypes"
       [multiple]="true">
    </ng-select>
  </div>
</div>

But values are not setting by default in multi-select.

you can do something like this in `ngOnInit` or any of life cycle like this : `this.selectedAttributes = this.sensorTypes[0]`, if `sensorTypes` is `array` of `objects` — Abdul Basit, Feb 21 '19 at 06:57
why i need to do this when i am binding ngModel having values in it? — Fahad Subzwari, Feb 21 '19 at 07:02

wentjun · Accepted Answer · 2019-02-21T07:53:31.133

11

You should use the [items] input binding instead of [options]

<ng-select 
  [items]="sensorTypes"
  bindLabel="label"                 
  [multiple]="true"
  placeholder="Select"
  [(ngModel)]="selectedAttributes">
</ng-select>

And on your component's module.ts, import the NgSelectModule. And if you haven't import your FormsModule, you should do so, as it needs to be imported for 2 way binding with ngModel to work.

import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
.
.
@NgModule({
  imports: [
    FormsModule,
    NgSelectModule,
. 
.
.

edited Feb 21 '19 at 07:53

answered Feb 21 '19 at 06:56

wentjun

40,384
10
95
107

but the list shows correctly in angular multi select when i open drop down. then only problem is that i cna't set default values dynamically. – Fahad Subzwari Feb 21 '19 at 07:01
Hmm.. But according to the ng-select documentations (https://www.npmjs.com/package/@ng-select/ng-select), there is not such binding for `[options]`. I think you are required to use `[items]` in order for it to work – wentjun Feb 21 '19 at 07:07
I have edited my solution; added `bindLabel`. Do you wanna try copying and pasting my code and see if it works? – wentjun Feb 21 '19 at 07:08
yes it is throwing an error like this `Can't bind to 'items' since it isn't a known property of 'ng-select'.` – Fahad Subzwari Feb 21 '19 at 07:09
Oh.. Are you using an older version of ng-select? – wentjun Feb 21 '19 at 07:11
i am using this version `"ng-select": "^1.0.1"` – Fahad Subzwari Feb 21 '19 at 07:12
Ok, did you `import { NgSelectModule } from '@ng-select/ng-select';` and `import { FormsModule } from '@angular/forms'` onto your component module? – wentjun Feb 21 '19 at 07:15
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/188790/discussion-between-fahad-hassan-subzwari-and-wentjun). – Fahad Subzwari Feb 21 '19 at 07:17

score 3 · Answer 2 · edited Aug 20 '20 at 13:07

3

values are not setting by default in multi-select

for this assign this.sensorTypes[0] to ngModel of your ng-select in ngOnInit()

    ngOnInit() {
      this.selectedAttributes = this.sensorTypes[0]
    }

this will get the first attribute as the default one.

edited Aug 20 '20 at 13:07

Akash Kumar Verma

3,185
2
16
32

answered Feb 21 '19 at 07:18

Ganesh

5,808
2
21
41

2

what if i have to set multiple values in ng-select by defailt? – Fahad Subzwari Feb 21 '19 at 07:42

score 3 · Answer 3 · answered Feb 25 '20 at 12:13

3

if you are using both bindlabel and bindvalue so fist find index of selected value t e

var index= this.sensorTypes.findIndex(x => x.ID ==something); 
//this will set value
this.selectedAttributes= this.sensorTypes[index].ID;

answered Feb 25 '20 at 12:13

Manan bhavsar

31
1

This is the answer helped me, since i'm using both bind value and bind label. For people who don't understand -> You have to bind the value you given as bindValue as the value, not the bindLabel value – Kavinda Jayakody May 04 '20 at 22:05

Mustafha · Answer 4 · 2021-10-01T08:09:29.043

0

There are two different ng-select modules:

@ng-select/ng-select
ng-select

both directive tags are same and [options] used in ng-select and [items] used in @ng-select/ng-select

ng-select documentation https://basvandenberg.github.io/ng-select/#/documentation

Its all your choice to use any of one

edited Oct 01 '21 at 08:09

answered Sep 30 '21 at 07:42

Mustafha

13
4

How to set default values in ng-select in angular6?

4 Answers4