default selected value is not comming in dropdown in angular

Question

I want to know why the selected value is not coming in the dropdown value? below is my code:

<select [(ngModel)]="stExamSelected" (change)="StudentfilterSelected('exam',$event.target.value)" class="form-control">
   <option [ngValue]="" selected>All Exam</option>
   <option *ngFor="let exam of filteredStudentExamsList | async" [ngValue]="exam"> 
   {{exam.examName}}</option>

here, All Exam is not selecting by default, can anyone tell why it is happening and what is the solution for this?

Answer 1

[ngValue] expects a property, to give it a string you need both quotes [ngValue]="''"

value="" works as well.

selected is unnecessary since you have the dropdown bound to stExamSelected . Just initialize this property as an empty string and it will select that option.

stExamSelected = '';

<select [(ngModel)]="stExamSelected" (change)="StudentfilterSelected('exam',$event.target.value)" class="form-control">
   <option value="">All Exam</option>
   <option *ngFor="let exam of filteredStudentExamsList | async" [ngValue]="exam"> 
   {{exam.examName}}</option>