CODEWITHSUNDEEP
angular
VinoCoder
VinoCoder

Reputation: 1153

ng-select: Selected not working for ng-option in angular 6

Im using "@ng-select/ng-select": "^2.9.1", for select box.. I want to make it selected in inside the option tag. Like we're doing it in normal html.

<option value="option" selected="selected">Option</option>

Like above i want to do in angular ng-select. Below is my code:

<ng-select class="required" bindLabel="datafield.label" bindName="datafield.iddatas_field" (change)="addDatafile($event,i)" >

    <ng-option *ngFor="let optionsl of datafield.dataOptionsList" [value]="optionsl.option" >{{optionsl.option}}</ng-option>
</ng-select>

Im tried with these codes as attribute inside <ng-option> but its not working:

selected="selected"
[selected]="true"

Upvotes: 2

Views: 14796

Answers (3)

Amit Golhar
Amit Golhar

Reputation: 809

have a look into below link : https://stackblitz.com/edit/angular5-select-option-dropdown

component.ts:

  private selectedname ;
   NAMES  = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
  'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];

    onChangeName($event) {
console.log(this.selectedname);

    }

component.html:

  <label>Highlight</label>
  <select  [(ngModel)]="selectedname" (change)="onChangeName($event)">

                        <option [label] ="name" *ngFor="let name of NAMES" [selected]="selected" [value]="name">{{name}}</option>
 </select>
 <p>{{selectedname}}</p>

Upvotes: 0

Er Abdul Meman
Er Abdul Meman

Reputation: 173

You can use reactive form control and pass that value to that control which you want to put selected. It'll work

Upvotes: -1

dannybucks
dannybucks

Reputation: 2355

ng-select works a little bit different. You don't have ng-options, instead you bind the available options with [items] and specify the label and value of the items, e.g.

<ng-select [items]="myItems" [(ngModel)]="model.selectRes" bindLabel="label" bindValue="id">
</ng-select>

This would correspond with an array of items where each item (or options) has a label with the text to display and the value that texts refers.

[(ngModel)] binds the ng-select to your model. ng-select selects the bound value, so in your .ts, just set model.selectedRes to the wished value and that is then selected.

Upvotes: 2

Related Questions