Angular ngFor select options with object value as default shown Ask Question

Let’s say I have an object one of statusOptions=[‘Approved’, ‘Waiting’, ‘Rejected’]

In the markup we have:

<div *ngFor="let myObject of objects">
    <select (change)="updateStatus($event.target.value)">
       <option selected>{{myObject.status}}</option>
       <option *ngFor="let status of statusOptions">{{status}}</option>
    </select>
<div>

How would I show the object’s current status as the default selected value? As of right now it will duplicate and the dropdown will show ['Approved', 'Waiting', 'Rejected', 'Approved'] if the object’s current status is 'Approved'

I do not need two way binding as I just grab the value on change and update my database.

One thought on “Angular ngFor select options with object value as default shown Ask Question”

  1. Solved it by setting [attr.selected] in the option.

    <div *ngFor="let myObject of objects">
    <select (change)="updateStatus($event.target.value)">
       <option *ngFor="let status of statusOptions" [attr.selected]="transaction.status === status ? true : null">{{status}}</option>
    </select>
    

Leave a Reply

Your email address will not be published. Required fields are marked *