Default value not selected after 'Select' options are passed as Input

Question

My select control is as below

    <select formControlName="productType">
        <option *ngFor="let option of optionsArray; let i = index"
                [selected]="i===0">
            {{ option.name }}
        </option>
    </select>

In my ts file the optionsArray is a property

@Input( 'options'):IMyOption[]

get optionsArray(): IMyOption[] {
    return Object.values( this.options );
}

The options is a input from parent component. All I want is to the select the first item but is always blank. The options are populated from the parent correctly. How can I get [selected] to work? Please help.

Does this answer your question? [Angular 4 - Select default value in dropdown \[Reactive Forms\]](https://stackoverflow.com/questions/47011521/angular-4-select-default-value-in-dropdown-reactive-forms) — tcrite, Mar 10 '21 at 13:26
I know setting the value in constructor will work - but I do not know the value as its a input array — user2837961, Mar 10 '21 at 13:34
@user2837961 can't you just check when the array is initially loaded and set it to the first element in the array? — tcrite, Mar 10 '21 at 14:56

José Polanco · Answer 1 · 2021-03-10T13:37:04.323

0

Try like this.

<select formControlName="productType">
    <option *ngFor="let option of optionsArray; let i = index"
            [selected]="i===0 ? 'true': ''">
        {{ option.name }}
    </option>
</select>

edited Mar 10 '21 at 13:37

answered Mar 10 '21 at 13:29

José Polanco

574
4
19

No - unfortunately not – user2837961 Mar 10 '21 at 13:33
Inspect the final select and check if the first element has the attribute `selected=selected` – José Polanco Mar 10 '21 at 13:35
No - there is no option of 'selected' in dev tools – user2837961 Mar 10 '21 at 13:37
Try changing "selected" for true as modified, I hava made a example on Stackblitz following your code:https://stackblitz.com/edit/angular-quyaec?file=src/app/app.component.ts – José Polanco Mar 10 '21 at 13:55
1

You are right. Work when you have options in OnInit but does not if the options are passed in @Input – user2837961 Mar 10 '21 at 14:00

Default value not selected after 'Select' options are passed as Input

1 Answers1