model() input binding does not emit changes

[johncrim]

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

core

Is this a regression?

No - model() is relatively new and in developer preview

Description

A model() property provides an input and an output binding; but when the input is bound to a normal object (not a signal) no change is emitted.

Given a component:

@Component({
  selector: 'test-model',
  template: '<ng-content></ng-content>'
})
class ModelEmitComponent {

  readonly model = model<number | null>(null);

  // Set of all non-null emitted values.
  readonly emitted: number[] = [];

  @Input()
  set setModelValue(v: number) {
    this.model.set(v);
  }

  constructor() {
    this.model.subscribe(v => {
      if (v !== null) {
        this.emitted.push(v);
      }
    })
  }
}

when the model object is set via the old-school @Input and WritableSignal.set(), like:

<test-model [setModelValue]="3" />

The value change is emitted, so a change listener can see it.

When the model object is set using model input binding:

<test-model [model]="3" />

The value change is not emitted, so there is no way to know that a change occurred. I'm pretty confident in saying that developers will expect all model changes to be emitted, not just those caused by WriteableSignal.set().

Please provide a link to a minimal reproduction of the bug

https://github.com/johncrim/ng18-tests/blob/main/projects/output-emit/src/app/model-emit.spec.ts

Please provide the exception or error you saw

No exception; the error is that the change event is not emitted.

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

Angular CLI: 18.2.7
Node: 22.6.0
Package Manager: yarn 4.5.0
OS: win32 x64

Angular: 18.2.7
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1802.7
@angular-devkit/build-angular 18.2.7
@angular-devkit/core 18.2.7
@angular-devkit/schematics 18.2.7
@schematics/angular 18.2.7
rxjs 7.8.1
typescript 5.5.4
zone.js 0.14.10

Anything else?

Test cases show that the model binding failing to emit occurs both for initial binding, and for input changes after the component is created.

describe('model() emit', () => {
  let spectator: SpectatorHost<ModelEmitComponent>;
  const createHost = createHostFactory(ModelEmitComponent);

  it('@Input model.set() is emitted', () => {
    spectator = createHost(`<test-model [setModelValue]="3" />`);
    expect(spectator.component.model()).toBe(3);
    expect(spectator.component.emitted).toEqual([3]);
  });

  it('model input is emitted (fails)', () => {
    spectator = createHost(`<test-model [model]="3" />`);
    expect(spectator.component.model()).toBe(3);
    expect(spectator.component.emitted).toEqual([3]); // fails b/c model binding to regular object doesn't emit
  });

  it('@Input model.set() emits when changed after create', () => {
    spectator = createHost(`<test-model [setModelValue]="initialValue" />`, {
      hostProps: {
        initialValue: null
      }
    });
    expect(spectator.component.model()).toBe(null);
    expect(spectator.component.emitted).toEqual([]);

    spectator.setHostInput('initialValue', 2);
    expect(spectator.component.model()).toBe(2);
    expect(spectator.component.emitted).toEqual([2]);
  });

  it('model input emits when changed after create (fails)', () => {
    spectator = createHost(`<test-model [model]="initialValue" />`, {
      hostProps: {
        initialValue: null
      }
    });
    expect(spectator.component.model()).toBe(null);
    expect(spectator.component.emitted).toEqual([]);

    spectator.setHostInput('initialValue', 2);
    expect(spectator.component.model()).toBe(2);
    expect(spectator.component.emitted).toEqual([2]); // fails b/c model binding to regular object doesn't emit
  });

});

[JeanMeche]

This is an expected behavior of model.

subscribe (or the EmitterRef) only recieves and update when the model itself is set.
model is meant to be used for double bindings. Parent setting an input doesn't need to receieve a value update when the set a value on their child input. This is done a by dedicate code path during the change detection cycle.

If you need to listen to a model change inside your child component, you should use effect instead.

[johncrim]

Hi @JeanMeche - thank you for the reply. I understand that the current behavior makes sense as a default if you only care about binding from parent components.

I was using effect, but it wasn't working for me because the timing is after component initialization, and I need to synchronize state on the initial (input) value if provided.

effect is different in that it only emits when doEffect() is called - it tells you that signals have changed to a new value at some point previously, after the next change detection (I notice the timing is improving from the blog post, which is great). Whereas model provides synchronous event notifications - so the timing is what is needed for some use cases, particularly during component initialization.

To circle back, model provides a number of nice things that are useful but restrictive outside of the basic use case:

• It is the only signal primitive that is both a writeable signal, and emits all updates to the subscriber synchronously
  (toObservable(signal()) only emits the current state when the effect runs)
• It provides both an input and an output in the component model
• It provides input binding to both regular values, and signals
• It can't be declared as a private field - must be protected or public
• There is no way to intercept the input or output, similar to a property setter or getter in the old model

Unfortunately none of these capabilities can be used separately - for example, I would love to have a writeable signal primitive that also emits updates synchronously, that can be used as a private member.

It sounds like I'll have to use Observables and @Input / @Output to handle this.

[JeanMeche]

Intercepting an input to react to its changes is a practice that isn't recommended as it ties the behavior to the change detection cycle (you can read about the caveats here.

Also could you maybe describe a usecase that you are looking to address ?

[johncrim]

Thank you @JeanMeche - excellent blog post, I'll have to review your other articles.

The component in question can be simplified to a ListBox (similar to material list components). I implemented a pared-down and publicly shareable version of it yesterday while isolating the problem causing me to report this bug:
https://github.com/johncrim/ng18-tests/tree/main/projects/output-emit/src/app

In short, the List component has Option component children, and there is a shared ListState that is provided by the list and injected in each option.

@Component({
  selector: 'app-list',
  standalone: true,
  template: '<ng-content />',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  providers: [
    ListState
  ],
  host: {
    'tabindex': '0'
  }
})
export class ListComponent<TKey> {

  private readonly _state = inject<ListState<TKey>>(ListState);

  readonly activeIndex = model<number | null>(null);

  readonly selected = model<TKey[]>([]);

  private readonly options = contentChildren<OptionComponent<TKey>>(OptionComponent);

  constructor() {
    effect(() => this._updateOptionIndexes())

    // 2-way sync to ListState.activeIndex
    effect(() => this.activeIndex.set(this._state.activeIndex()), { allowSignalWrites: true });
    this.activeIndex.subscribe(i => {
      this._state.activeIndex.set(i)
    });

    // 2-way sync to ListState.selected
    effect(() => this.selected.set(this._state.selected()), { allowSignalWrites: true });
    this.selected.subscribe(sel => this._state.selected.set(sel));
  }

 ...
  private _updateOptionIndexes() {
    const optionComponents = this.options();
    for (let i = 0; i < optionComponents.length; ++i) {
      optionComponents[i].index = i;
    }
  }
}

@Injectable()
export class ListState<TKey> {

  readonly activeIndex = signal<number | null>(null);

  readonly selected = signal<TKey[]>([]);

}

The problem is: Since the model() doesn't provide a way to notify when inputs are set or are changed, I don't have a way to update the ListState signals. Thanks in advance for your guidance.

[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.}