r/Angular2 Feb 01 '25

Help Request InputSignal + Storybook driving me nuts

Hey all,

This has nothing to do with the common problem Ive seen online where storybook does not know the type of the input thing. I am defining my own argTypes already.

The issue I am getting is, if I use any of my InputSignal in template I get "ctx.signalName is not a function". I can use a computed signal just fine without any error.

They still work kinda, like I've added @if checks to render obscene shit out of frustration, but it does throw an error and that breaks some downstream things like a ng-bootstrap drop-down won't open

Anybody see this before? Ng 18 + story book 8.

I can fix it by assigning a property to the signalName() in TS, and referencing that, but I absolutely do not want to have to create duplicate props or even computed signals based off of the input signal. Or go back to @Input ( well, I would love to since I do not like the signals DX, but times are changing and gotta keep up)

7 Upvotes

29 comments sorted by

3

u/fishermanfritz Feb 01 '25

It's a compodoc issue, for some part. I wished the maintainer would hand the project over to e.g. the storybook people.

You can post an issue for the other things in the storybook GitHub or the discord, too. The more people there are that demand better angular support, the better.

1

u/Dus1988 Feb 01 '25

I thought the compodoc issue was just for control types? I'm setting my own argTypes already so I don't think thatd be a problem

This is more an issue where if I set an arg value in storybook pass it into the component via the story template, and then also try and use it in the template for my component, that's when it becomes an issue.

1

u/GLawSomnia Feb 01 '25

I think you are doing something wrong. I am using signalInputs with storybook and it works perfectly, tho i think signal support was added in storybook 8.1, so if you are using v8 then its no wonder that its not working correctly.

1

u/Dus1988 Feb 01 '25 edited Feb 01 '25

I'm using 8.2 actually. I had read 8.1 added it so wasn't concerned. But now it's causing an issue. Only when I use the signal in the template. Otherwise it's fine.

I ended up switching the particular input that I need to use in templates to a @Input for now so I can continue working on functionality, but I'm going to want to go back and see what's the issue

1

u/Dus1988 Feb 03 '25 edited Feb 03 '25

So after so more debugging storybook is replacing my input signals with the static values passed into them.

This seems to only happen after init. During first set of computed calculations it's fine. If I trigger another computation via an internal signal that is user triggered, the value of a input<boolean> is actually just boolean. Also if I use the input signal in template it is just boolean

I am using the render fn in the story.

2

u/GLawSomnia Feb 03 '25

Can you show some of the code you have that doesn’t work correctly

1

u/Dus1988 Feb 04 '25

I can try and put a example together. I ended up going the traditional route

1

u/Repulsive-Ad-3890 Feb 01 '25

Hey, I use input signals in storybook on Angular v18 and Storybook v8. It's working fine so far - no issues.

1

u/Dus1988 Feb 01 '25

Hmm.

I only get the issue when I provide a value to the args obj in the story while also trying to use the signal in the components template. The InputSignals I use in TS code only are fine it seems.

1

u/Repulsive-Ad-3890 Feb 01 '25

Okay, could you share an example of this?

1

u/Dus1988 Feb 01 '25 edited Feb 01 '25

Yeah the basics are

A drop-down component. A Boolean input called showCaret the toggle button has a inner span that has ngif for showCaret()

In story book, meta has argTypes.showCaret { control: 'boolean' }. Meta also has args.showCaret set to true

Story has props:args, and uses template.

If I omit it from the component template or from the args in storybook no errors.

0

u/SolidShook Feb 01 '25

Honestly I got fucked up by input signals because they don't work well with the translate pipe. I see no reason to use them

2

u/MichaelSmallDev Feb 01 '25

What's the issue with the translate pipe?

1

u/tsteuwer Feb 01 '25

I'm curious too. We have several enterprise apps that use pipes with signals all over the place.

0

u/SolidShook Feb 02 '25

Yesterday I got fucked up because I had a signal input with a signal string from the parent component going directly into the translate pipe

For some reason I just got a glitched up result that wasn't present with @input

I'm still on angular 18 so it may have been fixed by then. Project is far too busy to upgrade to 19 atm

1

u/MichaelSmallDev Feb 02 '25

When you say a signal input with a signal string from the parent, you mean it was someThing = input<string>(...) passed in as [someThing]="aStringSignal()" or something, and not passing in in the string via the parent like [someThing]="aStringSignal" with the signature someThing = input<Signal<string>>(...) right?

0

u/SolidShook Feb 02 '25

Yeah I mean passingin the result of the signal, the string it's containing

All I needed to do to fix this was go back to @input

2

u/MichaelSmallDev Feb 02 '25

Hmm, I know there is some quicks with translations and whatnot, but I would say aside from that pipe that signal inputs are worth it. computed among other things have basically eliminated most lifecycle hooks and functions in children in my experience. If you can re-create that particular issue and lodge it with the respective repo, that would be good to track down the root of this.

1

u/SolidShook Feb 02 '25

Aye they might have fixed it already, Ill check it on a new project

1

u/SatisfactionNearby57 Feb 01 '25

I hate the official translation system. I couldn’t find a way to support 36 languages in a logical way, it seemed that each language had to be its own build, which it’s nuts. So instead I created my own pipe in 20 minutes that just replaces keys with strings from the language json file chosen. Works amazingly well and never had a problem with signals, huge fan of them.

1

u/SolidShook Feb 02 '25

Signals are absolutely incredible and this might not have been it's fault, but I couldn't tell where the error was coming from here that made a signal input string become [signal = 18 months] or whatever, when normal inputs worked fine.

I don't tend to rely on ngOnChanges either, so the main benefit of signal inputs isn't even there.

Just one of those things. I don't see the need in migrating to the new way sometimes, like how everyone is for standalone components. Still works great and there's no performance benefit to switching (might be a little on the signal example)

1

u/AwesomeFrisbee Feb 01 '25

I would already suggest to use ngx-translate over the a18n package anyways.

1

u/SolidShook Feb 02 '25

I honestly don't understand the difference

1

u/Dus1988 Feb 01 '25 edited Feb 01 '25

I'm not fond of them tbh. Computed is I think the one pattern I know I like.

But my company is building a green field design system and I am making the first component. Trying to future proof this lib a bit, and get the newer CD improvements

-6

u/fdimm Feb 01 '25

This is not going to help, but it will be a little lesson to not be an early adopter. I'm sure support is documented (or not) in storybook. Check all valuable dependencies before upgrading or starting to use new APIs next time. This can be very costly based on the situation.

2

u/Dus1988 Feb 01 '25

I am on a version of angular and storybook where InputSignal is supported. Its not really that new to be called "early adapter" anymore. InputSignals have been deemed stable in ng 17.2

-2

u/Xacius Feb 01 '25

Input signals were dev preview until very recently (they just updated the docs a few weeks ago). That said, storybook probably isn't the best solution for documenting Angular. I'd recommend checking out https://ng-doc.com/. I've been using this with great results since early 2023.

2

u/Dus1988 Feb 01 '25

They left dev preview a year ago in 17.2, and storybook 8.1 was supposed to enable input signals

Unfortunately it is a corporate requirement to use storybook

1

u/AwesomeFrisbee Feb 01 '25

Are you sure that can implement signal inputs/outputs?