When I use the following code snippet:
<div style="text-align:center">
<form>
<select
type="checkbox"
name="vehicle1"
(change)="onchange()"
>
<option>
1
</option>
<option>
2
</option>
</select>
</form>
</div>
everything works fine, with the select defaulting to the first option. But when I modify it like this:
<div style="text-align:center">
<form>
<select
type="checkbox"
name="vehicle1"
[(ngModel)]="selectValue"
(change)="onchange()"
>
<option [ngValue]="1">
1
</option>
<option [ngValue]="2">
2
</option>
</select>
</form>
</div>
export class AppComponent {
title = "CodeSandbox";
public selectValue = "1";
constructor() {}
onchange() {
console.log("onchange");
console.log(this.selectValue);
}
}
by adding ngmodel and ngValue, the select tag shows up empty by default.
I am aware that I could add a line to display a dropdown title like:
<option [ngValue]="'none'" disabled>Select SortType</option>
however, I do not want that. I want the first option to be displayed by default. Is there any way to achieve that?