CODEWITHSUNDEEP
javascriptangulartypescriptangular2-select
Bhrungarajni
Bhrungarajni

Reputation: 2535

How to get the options inside ng-select in angular2 or typescript

i have installed angular2-select and have defined that in module.ts as well. But when i click on select button, there are 2 contents but the contents are not visible, can anyone help me to solve this.

HTML:

<div class="form-group">
<label >Category Type</label>
<ng-select [options]="category" [(ngModel)]="category.name" name="category" class='filterDropDown' placeholder="Category" notFoundMsg="No Category Found">
 </ng-select>
 </div>

ts: category:any = [{name:'school'},{name:'college'}];

Upvotes: 1

Views: 2762

Answers (2)

Sravan
Sravan

Reputation: 18647

According to angular-2 select, the options take in items array

Also, use ng-2 select instead of angular-2 select 

import {SelectModule} from 'ng2-select'

According to its documentation here, official documentation it requires,

items - (Array<any>) - Array of items from which to select. Should be an array of objects with id and text properties. As convenience, you may also pass an array of strings, in which case the same string is used for both the ID and the text.

So, your object shoud be either,

category:any = [{ id: 'school', text:'school'},{id: 'college', text:'college'}];

<ng-select [items]="category" [(ngModel)]="category.id" name="category" class='filterDropDown' placeholder="Category" notFoundMsg="No Category Found">
 </ng-select>

or

category:any = ['school', 'college'];

<ng-select [items]="category" [(ngModel)]="category" name="category" class='filterDropDown' placeholder="Category" notFoundMsg="No Category Found">
 </ng-select>

PS: You can use angular2-select change the object to,

import {SelectModule} from 'angular2-select'

It uses, value and label and use same [options] in html

category:any = [{ label: 'school', value:'school'},{label: 'college', value:'college'}];

<ng-select [options]="category" [(ngModel)]="category.label" name="category" class='filterDropDown' placeholder="Category" notFoundMsg="No Category Found">
 </ng-select>

Upvotes: 1

Rajkumar Rathi
Rajkumar Rathi

Reputation: 309

<ng-select [**items**]="category" [(ngModel)]="category.name" name="category" class='filterDropDown' placeholder="Category" notFoundMsg="No Category Found">

It is items not options

Upvotes: 0

Related Questions