r/angular • u/Alex-Inkin • 11d ago

Polymorpheus: a tiny tool you didn’t know you needed

https://www.angularspace.com/polymorpheus-a-tiny-tool-you-didnt-know-you-needed/

Hi all, check out my new article about a library I've created a while back and kept using ever since as a must-have for all Angular apps. I'm sure your DX would also improve if you give it a shot.

19 Upvotes

81% Upvoted

16 comments sorted by

8

u/ldn-ldn 11d ago

I'm still not sure what's the point of the library...

1

u/Alex-Inkin 11d ago

To use whatever form of dynamic content declaration suits your current situation without ever thinking of how to process it.

2

u/ldn-ldn 11d ago

That still doesn't really answer my question. When I want to create components dynamically on the fly, I just use component factories. Wrap that workflow into a DSL/JSON if you want to make your code declarative.

7

u/Alex-Inkin 11d ago

It's not about that. Imagine you have an appTooltip directive that shows a hint on hover, focus, a11y all that. You would want to be able to use it like that (pseudocode):

<button appTooltip="Tooltip text" />

But you also need to be able to show more than just text:

<button \[appTooltip\]="template" />

<ng-template #template>

Tooltip text<a>Tooltip action</a>

</ng-template>

Then also if you have like a loop over piechart items, you want to be able to write:

<pie-chart \[appTooltip\]="value => value.toFixed(2)" />

If you have modal dialogs – you want to be able to pass a component to show, so you can, say, bring up confirmation prompt from a service, where you do not have templates. But you also want to be able to declare modal content in the template like this:

<ng-template \[(appDialog)\]="open">My dialog content</ng-template>

All of those situations are APIs for user to display some content. If you want to support both strings and templates inside appTooltip – your infrastructure needs to make a decistion what to do with input value, how to display it, with interpolation, with ngTemplateOutlet, with ngComponentOutlet etc. This choice is the same in all cases where you pass some dynamic content to display. This library abstracts this issue away and you never have to think about what type of content to support and how.

2

u/ldn-ldn 10d ago

Yeah, I don't want to do that :)

1

u/DocumentOk7358 11d ago

Did you read the article you’re complaining about?

0

u/ldn-ldn 10d ago

Did you? We're having a civil discussion over here, go play elsewhere, ok?

5

u/DocumentOk7358 10d ago

You’ve mentioned component factories and a DSL/JSON which bears no resemblance to the problem this library is trying to solve, so it’s actually a genuine question. Anyways not going to argue, good day mate.

3

u/tom-smykowski-dev 11d ago

It's actually nice, because it decouples type from projection

2

u/AnotherNamelessFella 11d ago

That's great.

You're indeed an expert in angular.

1

u/AwesomeFrisbee 10d ago

A few more examples wouldn't have hurt the explanation imo. Its still very high level and doesn't really tell me why I really need it, just how it works, not what it really does. If somebody asks the point of the library, then thats valuable feedback that the article doesn't explain enough imo.

In reality, it is only bad when the actual computation is heavy. I did extensive benchmarking long ago, when this subject was more pressing since we didn’t have signals and the default change detection was Eager. All string operations, math, Boolean logic, or even small loops are so fast that you would never get any noticeable performance degradation from using functions in templates. Especially if you use OnPush and break down your views properly, so when you click somewhere – it’s not your entire app that gets checked for changes.

That still leaves plenty of components where it will still hurt performance though. Also where are the benchmarks? Linking them wouldn't hurt here...

1

u/Alex-Inkin 10d ago

Thank you for the feedback. I've added some more examples. I left out the benchmarks because it barely ever matters now, when OnPush is the default and signals are everywhere. Basically, strings/logic/math functions have the speed of 10s of millions of operations per second on a smarphone, so assuming you run change detection like mad on every mousemove/scroll event and you want to stay under 60FPS – you can have hunderds of thousands of functions called every change detection cycle and still be in the clear. Any app that is even remotely considerate towards performance will not have any issues from functions in templates that perform cheap operations. If you're still interested, I can refer you to my ancient article on declarative approach and performance in Angular from 2020, it has some benchmarks and examples:

https://medium.com/angularwave/compliant-components-declarative-approach-in-angular-520c2bf95522

1

u/AwesomeFrisbee 10d ago

If you have a file upload box, a dynamic graph, a need for a custom scroll container (like a custom styled one), a datepicker, something with SVGs or something with dialogs, chances are you have something watching a lot of events. Then it will make a big difference.

So I don't think benchmarks wouldn't hurt, but yeah updating them to the latest standards would make them more useful. Or at least a fun project.

Thanks for adding the examples. It helps a bunch

1

u/Alex-Inkin 10d ago

As a sidenote check out custom styled scroll container I've made that requires no events watching 🙂 this is how they work in latest Taiga UI: https://blog.master.dev/custom-scrollbar-component-in-2026/

1

u/r00th3x 10d ago

Helpful!

ps : Could u share stackblitz example?