Drop Down Not Rendering

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 3. ng generate component SandBox 4. Place demo code into sandbox component w/ corresponding html 5. 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; }

[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’] })