Ng2-select: Value on start

[AndersonDev]

1) Try to set initial selected value by active:

<ng-select [allowClear]="true"
    [active]="roles[1]"
        [items]="roles"
        [disabled]="inProgress"
        (data)="setRole($event)"
         placeholder="Виберіть роль">
</ng-select>

No success. Maybe I am doing something wrong?

2) If I loading items from host I have no results as long as I do not add *ngIf="someItems". If _someItems_ loaded after then html view I will have 0 items in select.

[harunurhan]

I have the same issue, in example in docs, [data] is used but it doesn't work neither for the example nor my app.

[curlyfro]

+1

[fahad-nxvt]

having the same issue. It was working fine few days back with [initData]. But suddenly it has stopped working. Any help will be highly appreciated.

[harunurhan]

I ended up implementing something similar but simple with ng2-bootstrap. You can have a look may be it will help you.

https://github.com/inspirehep/record-editor/tree/master/src/app/editor/searchable-dropdown

[pierre-rossignol]

[initData] works fine for me with the latest version. It expects an array as an input. Just make sure you pass it an array like this :this.activeItem = [{ id: '1234', text: 'My label' }] Hope this helps!

[AndersonDev]

@pierre-rossignol no. You have not a last version. In new we haven't initData input

[AndersonDev]

Any progress here? Can't see where is the problem... Maybe here:

 if (!selectedItems || selectedItems.length === 0) {
      this._active = [];
    }

When I pass only one active item

[adrianfaciu]

Docs need to be updated, the property is called active instead of data. In the demo if you use something like [active]="[items[0]]" you'll have an initial value.

So it's: active (?Array<any>) - Initial selection data to set... In your initial example you just have to make sure it's an array, like [active]="[roles[1]]".

[AndersonDev]

@adrianfaciu tried:

<ng-select [allowClear]="true"
           [items]="roles"
           [active]="[roles[0]]"
           [disabled]="inProgress"
          (data)="setRole($event)"
          placeholder="Виберіть роль">
</ng-select>

doesn't work...

[adrianfaciu]

My bad, this looks to work with the code from here. The version on npm looks to be older, and it still has initData as property. So if you're installing from npm you should use that, until a new release comes out.

[AndersonDev]

@adrianfaciu when you update npm package?

[AndersonDev]

@adrianfaciu and there is one more problem. I have modal that render himself only on page load and only one time. However I have many rows and edit or add buttons to add or edit _contacts_. I get my role (value in select on init) from server async. And here we have situation: view loaded however data not. Set ngIf I can't because in other case I have not get data from server (add new).

ngModel is good in this cases: I can set it in different time or not set

[adrianfaciu]

@valorkin can give you details on release schedule.

[AndersonDev]

@adrianfaciu and there is one more problem. I have modal that render himself only on page load and only one time. However I have many rows and edit or add buttons to add or edit contacts. I get my role (value in select on init) from server async. And here we have situation: view loaded however data not. Set ngIf I can't because in other case I have not get data from server (add new).

[uzumakinaruto123]

anything on this ? [active]="[roles[0]]" does not work. nothing works.

[ElectronicaGitHub]

<ng-select [active]="[periods[0]]" [data]="periods"></ng-select> should work on actual version.

[dinhduongrestaff]

I think at [active] property, we need to support [active] for single value as default value. It will look to be more friendly. You can change this line inside select.ts source

and then you can use like this

Or if use old way
You just wrap the default value by array

[active]="someValue"

and in your .component.ts

someValue = [{}] // Init
someValue = [anotherData] // update as default value

[nigul2009]

If you add the following lines to the ng-select component in the view

[items]="models"
[active]="somevariable"
(data)="refreshValue($event)"

And in your component you implement the assignment to the variable "somevariable" in the method "refreshValue":

  public refreshValue(value: any): void {
        if (!this.somevariable && this.models.length > 0) {
            this.somevariable= [this.models[0]];
        }
        console.log('New search input: ', value);
    }  

it will work!

[TheNephalim]

I was using ReactiveForms and I had similar problems as the above. I was finally able to get the default value to set by using the following:

   <ng-select [allowClear]="true"
       [items]="reviewTypeItems"
       [multiple]="false"
       (data)="refreshValue($event)"
       placeholder="Select a review type" 
       id="reviewTypeSelect" 
       formControlName="ReviewTypeSelect">
   </ng-select>

    this.editReviewerFormGroup = new FormGroup({
        .....Code Elided.....
        'ReviewTypeSelect': new FormControl(this.context.defaultValue, Validators.required)
    });

where the value for this.context.defaultValue was in the form of [{id: 1, text: 'someValue' }]

[FrancescoBorzi]

just using [active]="myInitialStringArray" worked for me