Display selected value from drop down list in Angular 13

Question

Here's my code:

<tbody *ngFor="let user of users">
    <td>{{user.name}}:</td>
    <td>
        <ng-select  [items]="userList" bindValue="id" formControlName='id' bindLabel="label">
            <ng-template ng-option-tmp let-item="item">
                <div [ngbTooltip]="item.label" placement="bottom">{{item.label}}</div>
            </ng-template>
        </ng-select>
    </td>
</tbody>

userList: [
    { id: 1, label: 1 },
    { id: 2, label: 2 }
]

users: [
    { id: 5545, name: 'Z', value: 1 }
    { id: 1112, name: 'A', value: 2 },
    { id: 4455, name: 'B', value: 1 }
]

If userList.id == user.value then it's label should be selected in drop down.

Current Result:

Expected Result:

Sahil Thummar · Accepted Answer · 2022-04-23 15:37:31Z

0

Found the solution.

formControlName='{{user.value}}' Instead of formControlName='id' works for me.

<tbody *ngFor="let user of users">
    <td>{{user.name}}:</td>
    <td>
        <ng-select  [items]="userList" bindValue="id" formControlName='{{user.value}}' bindLabel="label">
            <ng-template ng-option-tmp let-item="item">
                <div [ngbTooltip]="item.label" placement="bottom">{{item.label}}</div>
            </ng-template>
        </ng-select>
    </td>
</tbody>

answered Apr 23, 2022 at 15:37

Sahil Thummar

2,61622 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display selected value from drop down list in Angular 13

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related