Can't bind to 'ngValue' since it isn't a known property of 'option'
Use value
:
[value]="ctn.value"
I was doing a very silly mistake and got into this issue.
- Instead of using
[ngValue]="ctn.value"
- I was supposed to use
[value]
I was importingformsModule
inside parent module, I should have imported it in child module to make[(ngModel)]
work [value]
should be[(value)]
if we want the default selection show up.
so my final component code is.
<label for="ctn" class="d-inline-block pl-1 semi-bold">Current active number</label>
<select
#selectCTN
class="custom-select"
id="ctn"
[(ngModel)]="selectedCTN"
(change)="onCTNChange(selectCTN.value)"
>
<option value="" disabled>Choose a state</option>
<option *ngFor="let ctn of availableCTN" [(value)]="ctn.value">
{{ctn.text}}
</option>
</select>