show placeholder by default

[masoudline]

i am using ng2-select2 and set option like below code: this.options = { allowClear: true, placeholder: "select...", } i want show placeholder by default but it dosen't and the first value of list show everywhere! please help me!

[superMDguy]

Try this:

placeholder: {
    id: "-1",
   text:  "select..."
  }

Source

[masoudline]

your code not working and my issue still exists

[ayyash]

The trick was doing this:

<select2  [data]="countryList" [options]="selectOptions">
	<option></option>
</select2>

[werad]

Try this:

this.options = { placeholder: { id: '', text: 'Select an option' } }

this.data = { { id: '', text: 'Empty'}, { id: 1, text: 'Option 1'}, }

[diegodesouza]

In my case I created a pipe to handle the options configuration for me.

export class OptionsPipe implements PipeTransform {
  transform(options: any, placeholder: string, data: any): {} {
    let defaultOptions: Select2Options;
    defaultOptions = {};

    defaultOptions['width'] = '100%';
    defaultOptions['containerCssClass'] = 'someClass';
    defaultOptions['placeholder'] = placeholder; <<< Your default placeholder

    return defaultOptions;
  }
}

and you would use it like so

*   {} | optionsPipe: 'Placeholder'
* Example:
*   [options]="options | optionsPipe: 'Suffix'" <<< here you pass down your `options` and set your `placeholder`. 

Since we have multiple select in our application this was an easy way to extract this functionality. Hope this helps

[slk500]

<select2 [cssImport]=true [options]="select2Options" [width]="'50%'"> <option></option> <option *ngFor="let tag of tags"> {{ tag.name }}</option> </select2>