I came across this post on another post asking this same question saying it's already answered however I can't seem to get it to work in my code. Inside of my component I have two variables defined like this.
MediaOptions: string[] = ['all', 'print', 'screen'];
DefaultOption: string = this.MediaOptions[0];
Inside my template I do this
<select [(ngModel)]="Value">
<option
*ngFor="let a of MediaOptions"
[ngValue]="a"
[selected]="a === DefaultOption ? true : null"
>
{{a}}
</option>
</select>
this isn't working. I've tried the following as well
<select [(ngModel)]="Value">
<option
*ngFor="let a of MediaOptions; let i = index"
[ngValue]="a"
[selected]="i === 0 ? true : null"
>{{a}}</option>
</select>
<select [(ngModel)]="Value">
<option
*ngFor="let a of MediaOptions"
[ngValue]="a"
[selected]="a === 'all'"
>{{a}}</option>
</select>
I also switched back and forth with [selected] and [attr.selected] with each one. I tried removing the conditions like in the last example, none of them seem to work. Is there something that changed since that question was answered? What do we need to do to get it to work?
Update
I forgot to mention in the question that the Value property the [(ngModel)] is binding to is a setter function that looks like this.
set Value(val: any){
this.MediaTypeControl = val;
this.onChange(val);
this.onTouch(val);
}
This is inside of an Angular form where I'm using ControlValueAccessor to create custom inputs.
