ng2-select
ng2-select copied to clipboard
valor-software
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
- 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.
Adding the following to my css fixed the issue:
.ui-select-choices.dropdown-menu { display: block; }
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'] })
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.
Work by supporting Bootstrap 4 was planned: https://github.com/optimistex/ng2-select-ex/issues/5
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.
