@if @else (or *ngIf) issue and change detection

[hammad-awan]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

I have a component that has conditional logic using an @if (or *ngIf) condition on a flag, e.g., @if (model.editable) or <ngContainer *ngIf="model.editable"...>, in its html file, which displays one set of controls for the true condition and another for false.

In ngOnChanges in the typescript file I call a service method that returns the model which has multiple properties including editable. The other properties are bound to various different control properties, e.g., <input [value]="model.wbsNumber" ...>.

app-field-dropdown and app-field-text-input are components that implement ControlValueAccessor and wrap existing HTML elements like selects or inputs and add additional functionality. The value property on app-field-text-input is just a passthrough to the value property on the underlying input control.

If the @input value to the component changes and triggers the code in ngOnChanges to retrieve a new model from the server and the model.editable property changes, e.g., from true to false or vice versa, I seem to have binding issues where control values are not being updated and reflecting the correct values, i.e., model.wbsNumber is not being set on the input control. This doesn't happen if the model.editable property does not change when ngOnChanges is triggered. The values are updated correctly in the ui.

I'm sure it has to do with dynamic control construction due to the @if, but I am at a loss as to why it does not work and how to get it so that the controls reflect the correct values in the ui.

One thing that helps the display as part of the first @if condition, i.e., model?.editable, is if I change this.ngModelGroup.reset(this.model) to setTimeout(() => this.ngModelGroup.reset(this.model), 50) for some reason. But this doesn't work for the @else condition because those controls are just one-way data-bound through the value properties. So the setTimeout call is hinting at something, but I don't know what.

@if (model?.editable) {
<ng-container ngModelGroup="wbs">
    <app-field-dropdown #wbsProgram
                        id="project-wbs-wbsProgramId"
                        name="wbsProgramId"
                        [field]="PMBField.ProjectSummaryProgram"
                        [required]="true"
                        [options]="wbsPrograms"
                        (change)="getWbsChildren(wbsProgram.name)"
                        ngModel />

   <!--Other controls-->
</ng-container>
}
@else {
<app-field-text-input id="project-wbs-wbsProgramName"
                      [field]="PMBField.ProjectSummaryProgram"
                      [readonly]="true"
                      [value]="model?.wbsProgramName" />

<!--Other controls-->
}

@ViewChild(NgModelGroup) ngModelGroup: NgModelGroup | undefined;

ngOnChanges(changes: SimpleChanges): void {
    if (changes["projectId"]?.previousValue !== this.projectId) {
        if (this.projectId) {
            this._projectWbsService.getProjectWbs({ request: this.projectId.id }).subscribe(response => {
                this.model = response;
                if (this.model.editable) {
                    // Other code...

                    this.ngModelGroup?.reset(this.model);
                   // Mostly works if I replace above with:
                   setTimeout(() => this.ngModelGroup?.reset(this.model), 50);
               }
        });
        } else {
            this.model = undefined;
            // Other code...
        }
    }
}

### Please provide a link to a minimal reproduction of the bug

_No response_

### Please provide the exception or error you saw

```true

Please provide the environment you discovered this bug in (run ng version)

Anything else?

No response

[JeanMeche]

Hi, could you provide a working reproduction of your issue so we can understand what is happening here ? Thank you !

[hammad-awan]

I don't think I can provide more (proprietary) code than this. I was hoping that I provided enough information for someone on the angular team to reproduce the issue.

I am almost certain the issue has to do with the structural directive *ngIf (or its equivalent @if/@else template block), change detection "timing", and the input [value] property binding, and not anything explicitly wrong with code written. Logic and reasoning engenders me to say this because I have another app-field-input-text component similar to the one with id="project-wbs-wbsProgramName" in the code given that sits outside of the @if @else block and binds to the [value] property in the same exact way and it always displays the correct data.

Now I've temporarily handled the ngOnChanges for app-field-input-text component to see if its [value] property which is effectively just a pass through to the [value] property binding on the underly html input element it wraps is changing correctly via a console.log whenever the above parent component ngOnChanges is triggered, and the values that are in the model are indeed reflected in that property. However that value is not propagating to the html input element.

This stack overflow issue seems to be very similar, but it's proposed solution will not work for me since the if/else logic is dependent upon data distinct from what is being displayed: https://stackoverflow.com/questions/72774246/angular-html-forms-value-attribute-not-working-in-input-field.

[JeanMeche]

Ideally what we are looking for is a narrowed down reproduction. It often helps you understanding what is wrong with with code when you provide it.

Understand that without a repro, this isn't actionable to us.

[Lavina-korani]

//HTML CODE

<ng-container *ngIf="model?.editable; else readOnlyMode">
  <!-- Editable Mode -->
  <ng-container ngModelGroup="wbs">
    <app-field-dropdown
      #wbsProgram
      id="project-wbs-wbsProgramId"
      name="wbsProgramId"
      [field]="PMBField.ProjectSummaryProgram"
      [required]="true"
      [options]="wbsPrograms"
      (change)="onWbsProgramChange(wbsProgram.name)"
      [ngModel]="model?.wbsProgramId"
    ></app-field-dropdown>

    <!-- Other editable controls -->
    <input
      id="project-wbs-wbsNumber"
      name="wbsNumber"
      [ngModel]="model?.wbsNumber"
    />
  </ng-container>
</ng-container>

<ng-template #readOnlyMode>
  <!-- Read-Only Mode -->
  <app-field-text-input
    id="project-wbs-wbsProgramName"
    [field]="PMBField.ProjectSummaryProgram"
    [readonly]="true"
    [value]="model?.wbsProgramName"
  ></app-field-text-input>

  <!-- Other read-only controls -->
  <span id="project-wbs-wbsNumber">{{ model?.wbsNumber }}</span>
</ng-template>

[Lavina-korani]

//TYPESCRIPT CODE

import { Component, Input, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-wbs-control',
  templateUrl: './wbs-control.component.html',
})
export class WbsControlComponent implements OnChanges {
  @Input() model: any; // The model containing editable and other properties
  wbsPrograms: any[] = []; // Options for dropdown

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['model']) {
      this.handleModelChanges();
    }
  }

  private handleModelChanges(): void {
    if (this.model.editable) {
      // Ensure editable controls reflect the updated model
      this.resetEditableControls();
    } else {
      // Update read-only control bindings explicitly
      this.updateReadOnlyControls();
    }

    // Trigger change detection manually to ensure UI updates
    this.cdr.detectChanges();
  }

  private resetEditableControls(): void {
    // Logic to reset or update editable controls dynamically
    // If using a form, this could look like:
    // this.formGroup.patchValue(this.model);
  }

  private updateReadOnlyControls(): void {
    // Manually update values for one-way bound properties
    // For example:
    // this.readOnlyWbsNumber = this.model.wbsNumber;
  }

  onWbsProgramChange(selectedValue: string): void {
    // Handle dropdown change logic
    console.log('WBS Program changed to:', selectedValue);
  }
}

[JeanMeche]

Can you make a working stackblitz repro ?

[e-oz]

I'm sure you are just binding in the template not to a reactive thing (not to a signal and not to an observable) and expect it to work.

[hammad-awan]

Can you make a working stackblitz repro ?

I will see if I can extract the code into something that is minimal and causes the issue because I’m not sure exactly what I need to keep to do so.

[hammad-awan]

Can you make a working stackblitz repro ?

I will see if I can extract the code into something that is minimal and causes the issue because I’m not sure exactly what I need to keep to do so.

I have looked into this further and it's likely that this is not a bug, but just how the framework works and that extra steps are needed to get what is intended to work.

Both my app-field-text-input and app-field-text-dropdown components (which are ControlValueAccessors as I said previously) pass through any data-bound FormControl instance attached to an ngModel, formDirective, etc., to the underlying input and select elements (via a FormControl directive bound to them) to effectively "delegate" to the latter's already implemented ControlValueAccessor implementations via dependency injection, which is done in ngOnInit for the former components.

When the components are constructed due to the *ngIf or @if/@else blocks, the FormControl instance is not set on them until ngOnInit completes, so any type of data-binding through a parent form model class, e.g., ngModelGroup, must "wait" until it exists prior to changing the value on it. This necessitates the above setTimeout wrapper around ngModelGroup::reset, and some additional code to be executed in the ngOnInit and ngOnChanges life-cycle hooks of the app-field-text-input for the @input value property data-bound to it, by explicitly setting the underlying input field @input value property via FormControl::setValue.

Due to my limited knowledge, I don't know if this are "hacky" workarounds or just necessary, but performing the above resolves my "issue".

Regards.

[JeanMeche]

We reviewed this issue with the team and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}