Can't bind to 'ngSelected' since it isn't a known property of 'option' - Angular 14

Question

I have a select with an option im trying to auto-select.

Here is the HTML

<select class="form-select" formControlName="role">
    <option *ngFor="let r of this.roles" [value]="r.id" [ngSelected]="test">{{r.name}}</option>
</select>

I have tried [ngSelected] ng-selected ngSelected [selected], but nothing works.

Here are my versions for angular:

@angular-devkit/architect       0.1400.5
@angular-devkit/build-angular   14.0.5
@angular-devkit/core            14.0.5
@angular-devkit/schematics      14.0.5
@schematics/angular             14.0.5
rxjs                            7.5.6
typescript                      4.7.4

Answer 1

I found the solution. In my code, I was using the [value] with the [selected]

I removed the [value] and now the [selected] works.

<option *ngFor="let r of this.roles" [selected]="this.user.role.id == r.id">
    {{r.name}}
</option>