Using breakpoint functions that return Signal (smaller, greater, etc.) causes error NG0602

[alexandrutatarciuc]

I have a scenario where the breakpoint is dynamic and I pass it as an input to my component. Therefore, I cannot call the breakpoint functions at the root level – I have to call them within another computed signal or within effect.

private breakpoints = observeBreakpoints(breakpointsTailwind);
private worksFine = this.breakpoints.smallerOrEqual("md");

// The problem 👇
private doesNotWork = computed<boolean>(() => {
    const signal = this.breakpoints.smallerOrEqual(this.inputBreakpoint());
    return signal();
  });
public inputBreakpoint = input<"sm" | "md" | "lg" | "xl" | "2xl">("sm");

However, this causes this error

REPRO
Try to run the app, and check the console

I suppose the only way to solve this issue is to pass the injection context to either the breakpoint function or to the observeBreakpoints

P.S. Many thanks for this library, the usage is elegant and straightforward. I am more than happy to contribute.

[tutkli]

Hi!! Thank you for using this lib!!
I've prepared a PR to deal with this issue. The change would allow to pass signals to the breakpoint functions.

I'm think of other improvements before realeasing like adding some more breakpoint presets and more configuration. I'll let you know when it's available!

[tutkli]

Hi! I just released version 2.0.0, you can try it now !

Regarding your issue, now you can pass a signal to the breakpoint functions

public inputBreakpoint = input<keyof typeof breakpointsTailwind>("sm");

// Remember to pass the signal without calling it!
protected shouldDisplay = this.breakpoints.smallerOrEqual(this.inputBreakpoint);

I hope this works for you, if you have any problem, let me know!

[alexandrutatarciuc]

Thanks a lot @tutkli for your prompt reply. I will try it out today, but it seems that everything should work as expected!

[alexandrutatarciuc]

I think one tiny thing makes the usage a little odd (at least in my case).
Usually, the signal that one gets when calling this.breakpoints.smallerOrEqual is something private/protected to the component. One wouldn't want to expose this information to other components, because it's irrelevant and should be encapsulated in the component using it.
On the other hand, a component's signal input will always be public. This means that one should declare a public field (input) before a private/protected field (breakpoints.smallerOrEqual), because the input would be used before initialization. This is quite uncommon and there are even linting rules that some users would have to ignore to make this work.
Again, I think that's a small, yet quite inconvenient thing.

[tutkli]

That's true, another way you can do it currently is like this:

// use a callback function with the signal, now calling it
protected shouldDisplay = this.breakpoints.smallerOrEqual(() => this.inputBreakpoint());

public inputBreakpoint = input<keyof typeof breakpointsTailwind>("sm");

[alexandrutatarciuc]

That's true, another way you can do it currently is like this:

Yes, I figure it out. This will be my go-to for scenarios like these. It feels a bit more natural because it's similar to the usage of computed. But I see only the advantages of keeping the option of passing a signal.
Once again, thank you for the changes :)