While browsing another forum, I stumbled upon this particular post where someone claimed to have already solved the issue I'm facing. However, no matter how hard I try, I can't seem to get it to work in my own code. Within my component, I have two variables set up like this:
MediaOptions: string[] = ['all', 'print', 'screen'];
DefaultOption: string = this.MediaOptions[0];
In my template, I attempt the following approach:
<select [(ngModel)]="Value">
<option
*ngFor="let a of MediaOptions"
[ngValue]="a"
[selected]="a === DefaultOption ? true : null"
>
{{a}}
</option>
</select>
However, this method doesn't seem to be effective. I've also experimented with the following alternatives:
<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 even went so far as to switch between using [selected] and
[attr.selected]</code for each attempt. Removing conditions like in the last example didn't yield any results either. Could it be possible that something has changed since the original question was addressed? What steps do we need to take to make it function properly?</p>
<p><em><strong>Update</strong></em></p>
<p>I neglected to mention that the <code>Value[(ngModel)] is actually linked to a setter function structured as follows:
set Value(val: any){
this.MediaTypeControl = val;
this.onChange(val);
this.onTouch(val);
}
This dilemma occurs within an Angular form where I'm utilizing ControlValueAccessor to establish customized inputs.