So, I have userSettings where I have dafaultPreset (which is the id) and I have a list of user presets. And I want to show the default preset in HTML select element, where user can change presets.

In HTML I have a select option like this:

<select class="form-control" name="bg" id="" (change)="patchPreset($event)" 
 [ngModel]="userSettings?.defaultPreset">
  <option value="null" disabled>Select Preset</option>
  <option *ngFor="let preset of userPresets" value="{{preset.id}}">{{preset.name}}</option>
</select>

And in my .ts file, when I add new preset to user, I'm calling an API for getting all user presets and assign again like this: this.userPresets = response;.

In that moment the default value in HTML select element changes to the first element of userPresets, even if the defaultPreset id is not changed. When I refresh the page, then it works fine.

Example

userPresets = [{id:1, name:1}, {id:2, name:2}, {id:3, name:3}];

userSettings.defaultPreset = 2;

And it shows 2 in HTML select element. When I again call API to get all presets and assign to userPresets, then in select element it shows 1. Can somebody explain me where I'm wrong?