Select default selected value in select tag in Angular 5

Question

here is my code

<select class="form-control input-transparent" id="select-field" name="address" ngModel required>
     <optgroup *ngFor="let wallet of wallets" label="{{wallet.label}}">
         <option value="{{ wallet.address }}" [selected]="wallet.address == wallets[0].address">{{ wallet.address }}</option>
     </optgroup>
</select>

I want to select first option as selected but still on default value was selected

score 2 · Accepted Answer · answered Apr 27 '18 at 12:42

selected is not supported with ngModel

You can use this sample code. I have created a demo on stackblitz. I hope this will help/guide to you/others.

HTML Code

<select class="form-control input-transparent" id="select-field" name="address" required [(ngModel)]="address">
    <optgroup *ngFor="let wallet of wallets;" label="{{wallet.label}}">
        <option [value]="wallet.id">{{ wallet.address }}</option>
    </optgroup>
</select>

.ts Code

    address:number=1;
    wallets= [{
        id: 1,
        address: 'address1',
        label: 'Label 1'
    }, {
        id: 2,
        address: 'address 2',
        label: 'Label 2'
   }]

thanks man ! working fine . whatever you are binding to [value] , you should set the value of the ngModel variable as one of its value . example if you are doing like this , then you can do in the component as address:string='address1'; — AhammadaliPK, Sep 05 '18 at 07:22

score 0 · Answer 2 · answered Apr 27 '18 at 08:03

Use the <selected> tags property value and set it to your desired value.

<select value="wallets[0].address">

You can set a pre-selected option in a drop-down list by using the value attribute for the tag, i.e. , but it's not valid in the W3C validator. – Apostle May 20 '15 at 15:40 How can I set the default value for an HTML <select> element?

Select default selected value in select tag in Angular 5

2 Answers2