Ng2-select: Drop Down Not Rendering

[rightisleft]

Problem: When i create the demo example there is no drop down menu.

1: npm install
2: download css and place path in angular.cli.json

1. ng generate component SandBox
2. Place demo code into sandbox component w/ corresponding html
3. Restart app

Observed:
Error: EXCEPTION: Uncaught (in promise): Error: Error in ./SandBoxComponent class SandBoxComponent - inline template:16:14 caused by: No value accessor for form control with unspecified name attribute
Error: No value accessor for form control with unspecified name attribute
at _throwError (http://localhost:8080/vendor.bundle.js:11830:11) [angular]

Solution: Add ngDefaultControl

1. Reload:

Observed: Input renders - but there is no drop down with my elements.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sand-box',
  template: `
  <div style="width: 300px; margin-bottom: 20px;">
    <h3>Select a single city</h3>
    <ng-select [allowClear]="true"
                [items]="items"
                [disabled]="disabled"
                (data)="refreshValue($event)"
                (selected)="selected($event)"
                (removed)="removed($event)"
                (typed)="typed($event)"
                placeholder="No city selected">
    </ng-select>
    <p></p>
    <pre>{{value.text}}</pre>
    <div>
      <button type="button" class="btn btn-primary"
              [(ngModel)]="disabledV" btnCheckbox
              btnCheckboxTrue="1" btnCheckboxFalse="0">
        {{disabled === '1' ? 'Enable' : 'Disable'}}
      </button>
    </div>
  </div>

`,
  styleUrls: ['./sand-box.component.css']
})
export class SandBoxComponent implements OnInit {

  public items:Array<string> = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona',
    'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest',
    'Budapest', 'Cologne', 'Copenhagen', 'Dortmund', 'Dresden', 'Dublin',
    'Düsseldorf', 'Essen', 'Frankfurt', 'Genoa', 'Glasgow', 'Gothenburg',
    'Hamburg', 'Hannover', 'Helsinki', 'Kraków', 'Leeds', 'Leipzig', 'Lisbon',
    'London', 'Madrid', 'Manchester', 'Marseille', 'Milan', 'Munich', 'Málaga',
    'Naples', 'Palermo', 'Paris', 'Poznań', 'Prague', 'Riga', 'Rome',
    'Rotterdam', 'Seville', 'Sheffield', 'Sofia', 'Stockholm', 'Stuttgart',
    'The Hague', 'Turin', 'Valencia', 'Vienna', 'Vilnius', 'Warsaw', 'Wrocław',
    'Zagreb', 'Zaragoza', 'Łódź'];

  private value:any = {};
  private _disabledV:string = '0';
  private disabled:boolean = false;

  private get disabledV():string {
    return this._disabledV;
  }

  private set disabledV(value:string) {
    this._disabledV = value;
    this.disabled = this._disabledV === '1';
  }

  public selected(value:any):void {
    console.log('Selected value is: ', value);
  }

  public removed(value:any):void {
    console.log('Removed value is: ', value);
  }

  public typed(value:any):void {
    console.log('New search input: ', value);
  }

  public refreshValue(value:any):void {
    this.value = value;
  }

  ngOnInit() {
  }

}

Problem: Drop Down should render a list of cities. It is not.

[rightisleft]

Adding the following to my css fixed the issue:

.ui-select-choices.dropdown-menu {
display: block;
}

[tosehee75]

Thanks.

Wasted 2+ hours and found this.

[alexlu3211]

Thanks @rightisleft!
lol, wasted 2+ hours on this too...

[ezzkht]

Wasted 2+ hours until i found this!

[maxpark-jd]

If you are using Angular 2, make sure to prepend /deep/

[alxpsr]

.open > .dropdown-menu { display: block; }

[nithiyakumark]

Thanks this will fix my issue also

[sujitnale123]

wasted whole week almost 10 days..Thanks :)

[GRTO]

It doesn't work to me

[khaukheng]

add encapsulation:ViewEncapsulation.None in your @component if the css fix above doesn't work.etc:
@Component({
selector: 'app-anywhere',
templateUrl: './app-anywhere.html',
encapsulation:ViewEncapsulation.None,
styleUrls: ['./app-anywhere.component.scss']
})

[alxpsr]

Generally this is a bad solution (i just added lost code from bootstrap). This is a simple dirty workaround - unpredictable and difficult to maintain. I removed this library (ng2-select) from my app.

[optimistex]

Work by supporting Bootstrap 4 was planned: https://github.com/optimistex/ng2-select-ex/issues/5

[n8all3n]

Why is that style not included in the css file in the repo?

[chris-schertenlieb]

If you're populating the items array with some kind of promise/db call, the select might bind to the array before it's populated. Once I added @rightisleft 's css, mine still wasn't working, and this was the issue.

Add *ngIf="items.length>0" to the ng-select wrapper div and that way it won't bind until the data has been returned to the array.

[lmx-gowthamb]

how to load optional items using formcontrol values in angular 6