I have a select that should show options based on the status of a game.

Code:

<select class="form-select" aria-label="Status" [(ngModel)]="selectedGame().status">
@if (selectedGame().status === GameStatus.played || selectedGame().status === GameStatus.forfeit) {
    <option [value]="GameStatus.played">{{ GameStatus.played | gameStatus }}</option>
    <option [value]="GameStatus.forfeit">{{ GameStatus.forfeit | gameStatus }}</option>
} @else {
    <option [value]="GameStatus.notPlayed">{{ GameStatus.notPlayed | gameStatus }}</option>
    <option [value]="GameStatus.postponed">{{ GameStatus.postponed | gameStatus }}</option>
}

Initially the options are rendered correctly based on the status. However after I swap between one of the available options it will then always show the options from the else block.

I tried to debug but can’t find the problem. When switching from ‘Played’ to ‘Forfeit’ the status is actually set correctly from ‘1’ to ‘3’. Maybe somewhere in the process the value is emptied and the signal is somehow not sending a notification when the new value is set?

Some help would be appreciated :).