[Bug]: Support of default Angular's inputs

[kvart714]

Describe the bug

I just updated to the latest Angular (18.2.9) and Storybook (8.3.6) and was surprised to find that it doesn't support signals

I found a lot of discussions, but they all talk about input and output signals. I'm talking about a simple signal(...)

I found this and this.
And I even see that you supported model().
But I don't understand why regular singal(...) is not supported?

Storybook has always allowed you to work with component fields without requiring you to make them inputs.
this makes sense because public fields are what html uses. But inputs are a contract with the outside world.

Reproduction link

https://stackblitz.com/edit/github-mbwd5e-mebzvr?file=src%2Fapp%2Fsignal-ex%2Fsignal-ex.stories.ts

Reproduction steps

example: https://stackblitz.com/edit/github-mbwd5e-mebzvr?file=src%2Fapp%2Fsignal-ex%2Fsignal-ex.stories.ts

let's say I have a component with a field.
this field can be updated asynchronously. Previously I had to use BehaviorSubject for this and I could override the value from Storybook.
now I want to use signal().
Storybook does not work with signal, but it works with model

@Component({
  selector: 'signal-ex',
  standalone: true,
  imports: [CommonModule],
  template: `Field: {{ field }} <br> Signal: {{ signalField() }} <br> Model: {{ modelField() }}`,
  styleUrls: [],
})
export class SignalExComponent {
  field = false;     // <- we can't use fields with ChangeDetection.OnPush
  field$ = new BehaviorSubject<boolean>(false);
  fieldSignal = signal(false);
  fieldModel = model(false);

  toggle() {
    this.field = true;
    this.field$.next(true);
    this.fieldSignal.set(true);
    this.fieldModel.set(true);
  }
}

story:

const meta: Meta<SignalExComponent> = {
  component: SignalExComponent,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<SignalExComponent>;

export const Primary: Story = {
  args: {
    field: true,
    field$: new BehaviorSubject<boolean>(true),
    fieldSignal: true as any,    // <- doesn't work
    fieldModel: true,
  },
};

System

Storybook Environment Info:

System:
OS: Windows 11 10.0.22631
CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13700H
Binaries:
Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD <----- active
Browsers:
Edge: Chromium (129.0.2792.79)
npmPackages:
@storybook/addon-a11y: ^8.3.5 => 8.3.6
@storybook/addon-actions: ^8.3.5 => 8.3.6
@storybook/addon-essentials: ^8.3.5 => 8.3.6
@storybook/addon-interactions: ^8.3.5 => 8.3.6
@storybook/addon-links: ^8.3.5 => 8.3.6
@storybook/addons: ^7.6.17 => 7.6.17
@storybook/angular: ^8.3.5 => 8.3.6
@storybook/core-server: 8.3.5 => 8.3.5
@storybook/testing-library: 0.2.2 => 0.2.2
chromatic: ^11.12.5 => 11.16.1
msw-storybook-addon: 2.0.3 => 2.0.3
storybook: 8.3.6 => 8.3.6
storybook-addon-pseudo-states: ^4.0.2 => 4.0.2

Additional context

No response

[RobbyRabbitman]

The signal inputs are replaced with the story props.

https://github.com/storybookjs/storybook/blob/bdf54f7ad975f21fda238de4dbabeaf2b84a1c47/code/frameworks/angular/src/client/angular-beta/StorybookWrapperComponent.ts#L110C9-L116C12

However settings inputs programmatically is not trivial in angular without a ComponentRef https://angular.dev/api/core/ComponentRef#setInput and angular/angular#54987

[valentinpalkovic]

Hi @kvart714

Thank you for reporting this issue.

I am not sure whether your reproduction is complete or makes sense.

A signal is not automatically exposed as a component's input. If you want to use a signal as an input, you have to either decorate it via @Input or use input instead to be able to pass in the input via component args. You can also use model if you need two-way data binding. Just using signal will not allow you to pass in a variable to set the signal from a parent component. AFAIK, that's exactly how it would work in Angular. fieldSignal cannot be controlled from a parent component.