Angular 4 Selected not working properly when it is given in model?

Question

When I'm trying to give a drop-down menu. By default, I need to select a value that needs to be displayed. When I'm not using a ngModel I'm able to display the default value.

Without ngModel

<select class="form-control">
    <option *ngFor="let type of ListType" [value]="type .id">{{type .name}}</option>
</select>

The Above code works fine when we compile it. I'm able to see first value on the list to be displayed.

---

With ngModel

<select class="form-control" [(ngModel)]="selectedListType">
    <option *ngFor="let type of ListType" [value]="type .id">{{type .name}}</option>
</select>

This is the display is empty.

Methods tried:

1. used Selected

<option *ngFor="let type of ListType" [selected]="type.name === 'Dislike'" [value]="type .id">{{type .name}}</option>

2. used attr.Selected

<option *ngFor="let type of ListType" [ngValue]="type " [attr.selected]="type .name== type.name ? true : null">{{ type.name }}</option>

EDIT

3. Even Tried to set the selected value via model still no outcome.

Is there any alternative way? Or Am I doing something wrong?

Answer 1

You are defining the value for the select as the id value, whereas you are feeding the selectedListType with the name property. So what you want to do is either provide the id value for selectedListType, so for example if your ListType looks like this:

[{id:1, name: 'Dislike'},{...}]

you want to set selectedListyType value as 1. Other option is, if you do not know the id value you can do:

ngOnInit() {
  this.selectedListType = this.ListType.find(x => x.name === 'Dislike').id
}

and your template will then look like this:

<select class="form-control" [(ngModel)]="selectedListType">
  <option *ngFor="let type of ListType" [value]="type.id">{{type.name}}</option>
</select>

Answer 2

Try Keeping you value and ngModel same like

value = {{type .id}} and [(ngModel)]= "selectedListType.id"

and print the value once it is selected in html

<br>id is {{selectedListType.id}}