angular select defualt option not displaying

Question

I have these selects and they are not showing the default option, they just show empty at the beginning.

<label>Review Type</label>
    <select clrSelect name="reviewerTypes" (change)="onChange(currentReviewerType)" 
      [(ngModel)]="currentReviewerType">
        <option value="" selected disabled hidden>
            Choose value
        </option>
        <option *ngFor="let reviewType of reviewerTypes" [(ngValue)]="reviewType">
            {{reviewType.reviewType}}
        </option>
</select>
<label>Reviewer</label>
<select clrSelect name="options" [(ngModel)]="currentReviewer">
    <option value="" selected disabled hidden>Choose value</option>
    <option *ngFor="let reviewer of reviewers" [(ngValue)]="reviewer">
        {{reviewer.user}}
    </option>
</select>

ts file:

reviewerTypes: [] = [];
reviewers: [] = [];
reviewersAdded: any[] = [];
currentReviewer;
currentReviewerType;
defaultType = {id:0, reviewType:"Choose Value"};
defaultReviewer = {userId:0,user:"Choose Value"};;

constructor(private dataService: DataServicesService) { }
ngOnInit() {
    this.dataService.GetReviewerTypes().subscribe( response => this.reviewerTypes = response, error 
        => console.log(error));
    this.currentReviewer = this.defaultType;////i tried to add a default object, didn't work
    this.currentReviewer = this.defaultReviewer;
}

onChange(selection){
    let reviewerId = selection;
    this.dataService.GetReviewersByType(reviewerId.id).subscribe( (response)=> {
      this.reviewers = response
      this.currentReviewer = this.defaultReviewer;
    }, 
    error => console.log(error));
}

I already tried [ngValue]="null", [selected]="true" and **[ngValue]="null" disabled** with this one i get an error of can't bind it since it's an unknowed property.

The problem is with both, the normal select, and the dynamic one too.

I'm not sure what else could I do.

Answer 1

Well as @ConnorsFan mentioned in a comment above. Since I'm binding the select with an object adding [ngValue]="undefined showed the default value, and for the dynamic select assigning it undefined on the onChange also displays the default value when the first one changes.

ts.

onChange(selection){
    let reviewerId = selection;
    this.dataService.GetReviewersByType(reviewerId.id).subscribe( (response)=> {
      this.reviewers = response
      this.currentReviewer = undefined;////////////Assign undefined
    }, 
    error => console.log(error));
}

Html.

<select clrSelect name="reviewerTypes" (change)="onChange(currentReviewerType)" 
[(ngModel)]="currentReviewerType">
    <option [ngValue]="undefined" selected disabled>
        Choose value
    </option>
    <option *ngFor="let reviewType of reviewerTypes" [(ngValue)]="reviewType">
        {{reviewType.reviewType}}
    </option>
</select>

<select clrSelect name="options" [(ngModel)]="currentReviewer" >
    <option [ngValue]="undefined" selected disabled hidden>Choose value</option>
    <option *ngFor="let reviewer of reviewers" [(ngValue)]="reviewer">
        {{reviewer.user}}
    </option>
</select>