Add Documentation how to programmatically set Input Signals

[RobbyRabbitman]

Describe the problem that you experienced

There is no documentation on how to set Input Signals programmatically.

Enter the URL of the topic with the problem

https://angular.io/guide/signal-inputs

Describe what you were looking for in the documentation

https://stackblitz.com/edit/stackblitz-starters-nmnsbz?file=src%2Fmain.ts

export function setValueOfInputSignal<T>(signal: InputSignal<T>, value: T) {
  const node = signal[SIGNAL];

  // Both work

  // signalSetFn(node, value);

  node.applyValueToInputSignal(node, value);
}

Describe the actions that led you to experience the problem

• Migrating from getter/setter with Input Decorator + private property signal or observable pattern => Can't set values anymore: This is painful, when you have a reference to a component (but not the template) and wan't to set values
• Testing a component with Input Signals => a container component is needed, see example below

Testing a component with a Input Signal without the ability to programmatically set the signal:

// my-component.spec.ts

function render(template: string, params?: object, providers?: Provider[]) {
  @Component({
    imports: [
      // ...
    ],
    standalone: true,
    template,
    providers,
  })
  class Container {}

  const fixture = TestBed.createComponent(Container);

  const detectChanges = fixture.detectChanges.bind(fixture);

  fixture.detectChanges = (checkNoChanges) => {
    Object.assign(fixture.componentInstance, params);
    detectChanges(checkNoChanges);
  };

  fixture.detectChanges();

  const componentInstance = fixture.debugElement.query(
    By.directive(MyComponent),
  ).componentInstance;

  return { fixture, componentInstance };
}

// usage
const params = { foo: 42 };
const { fixture } = render('<my-cmp [foo]="foo" />', params);
params.foo = 99;
fixture.detectChanges();

Describe what you want to experience that would fix the problem

Documentation on how to set Input Signals programmatically.

Add a screenshot if that helps illustrate the problem

No response

If this problem caused an exception or error, please paste it here

No response

If the problem is browser-specific, please specify the device, OS, browser, and version

No response

Provide any additional information here in as much as detail as you can

Thank you for reading, I would love to hear your thoughts on this! :)

[jnizet]

AFAIK, not being able to set a signal input programmatically is by design.

Although I think that this should be possible in some scenarios (setting the inputs of an injected host directive when using directive composition), setting inputs without a host component during tests is already possible by using ComponentFixture.componentRef.setInput().

[JeanMeche]

Per above, you should be using setInput().

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