4

I am trying to put a default option in my select that comes from a service.

My Select.

<select (change)="changeValue()" [(ngModel)]="selectedValue">
<option *ngFor="let item of items" [ngValue]="item">{{ item.article }} - {{ item.value }}</option>
</select>

The array that I am passing to the ngFor.

  items: Array<any> = 
  [{ article: 'item1', value: 10 },{ article: 'item2', value: 20 }]

When I load this component in my app, I receive from the database an object that contains one of these options.

So what I would like to do is, the option that I receive, set it as default.

I tried with [selected] but it is not working. How can I do it?

Improve this question
1

2 Answers 2

Reset to default
4

Basically you have this things missing:

  1. ngValue should be item.value
  2. You already assingning values so just changing the selectedValue variable would work, just like I did inside ngOnInit

Try something like this:

Typescript end:

  items: Array<any> =
    [{ article: 'item1', value: 10 }, { article: 'item2', value: 20, defaultSelected: true }];
  selectedValue: string = '';
  ngOnInit() {      
    this.selectedValue = this.items.filter(a => a.defaultSelected)[0].value;
  }

HTML end:

<select (change)="changeValue()" [(ngModel)]="selectedValue">
<option *ngFor="let item of items" [ngValue]="item.value">{{ item.article }} - {{ item.value }}</option>
</select>

Please check this demo: https://stackblitz.com/edit/angular-v2a81r

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

sorry maybe i didnt explain it well... i forked your demo... and i added some comments... please check it out. because i dont understand what you did :S stackblitz.com/edit/angular-9ehzbx?embed=1&file=src/app/…
@SergioCano as option value attribute can not store whole object, So I used item.value instead of item now as item.value is the value of the select You need to assign item.value to the this.selectedValue same as I did in my demo.
selectedValue: Object = { article: 'item1', value: 10 }; should be string instead of object selectedValue: string = "10";
ok i got it, yea...what i didnt undestand is that the option cant store all the object... thanks for you help
2

A non ngModel way of doing it is as below, as ngModel is deprecated in v7: https://next.angular.io/api/forms/FormControlName#use-with-ngmodel

<select (change)="changeValue()" [value]="defaultValue">
<option *ngFor="let item of items" [value]="item.value">{{ item.article }} - {{ item.value }}</option>
</select>

Demo here: https://stackblitz.com/edit/angular-wvnjn5

Improve this answer

4 Comments

is nice to know that ngModel will be deprecated in v7, but how do you bind the new value to defaultValue?
Just set the defaultValue again, check my updated demo. After 3 sec the selected value would change.
i mean, if you change the option using the select box... how do you bind it to a variable... i always did it with [(ngModel)]
You would need reference variable for the same, updated my demo. There is another way to get it in reactive forms, which I would suggest you to explore :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.