Having issue with Angular not updating the UI on model Change

Question

I have a issue regarding the UI update on my Radiobox group.

<div  *ngFor="let options of dateOptions">
    <input class="form-check-input" [value]='options.value' (ngModelChange)="selectionChanged($event)" type="radio" name="dateOptions"
           [(ngModel)]="selectedOption">
    <label class="mr-3">
        {{options.displayText}}
    </label>
</div>

This binding works fine and all. My component extends ControlValueAccessor and when the selectedOption is updated as follow:

writeValue(dateId: DateIds): void {
    const matchingOption = this.dateOptions.find((option) => equal(option.id, dateId))
    this.selectedOption= matchingOption ? matchingOption.value : this.selectedOption
    this.selectionChanged(this.selectedOption)
  }

The value is set correctly of selectedOption but the UI only updates if I interact with the component. I doesn't have to be changing the selection even opening my datepicker is enough for the UI to update.

According to documentation the UI should change when selectedOption changes to match the value.

Answer 1

Okay, I checked it on my side. You idea works as expected. There must be something in your code that disturbes the update process.

This is my setup. After 10 seconds the value of selectedOption gets changed. And in my case the radio button 1 loses its selection and 3 gets selected. Without any further interaction.

**HTML**

<div  *ngFor="let options of dateOptions">
    <input class="form-check-input" [value]='options' 
        (ngModelChange)="selectionChanged($event)" 
        type="radio" name="dateOptions"
        [(ngModel)]="selectedOption">
        <label class="mr-3">
            {{options}}
        </label>
 </div>

TS

dateOptions = ['date1', 'date2', 'date3'];
selectedOption = 'date1';


constructor() {
    setTimeout(() => {
        this.selectedOption = 'date3';
        console.log('changed');
    }, 10000);
}