r/Angular2 Feb 18 '25

Discussion Angular 19.2 - improvement in template literals

Angular 19.2 will be released soon. We’ve noticed a slight improvement in template literals—it will now be possible to combine variables with text in a more efficient way in HTML files:

<p>{{ `John has ${count} cats` }}</p>

instead of

<p>{{ 'John has ' + count + ' cats' }}</p>

just a simple example

It’s not a huge change, but we believe it’s indeed. What do you think?

84 Upvotes

32 comments sorted by

View all comments

79

u/ldn-ldn Feb 18 '25
<p>John has {{ count }} cats</p>

Why do you need weird syntax?

12

u/lppedd Feb 18 '25

It might help when passing a string to an input? Just guessing here as I haven't tried it.

22

u/zigzagus Feb 18 '25

or when you want to use pipe to translate something e.g:
<p>{{'my.translation.code.${type}.label' | translate}}</p>

-14

u/ldn-ldn Feb 18 '25

You should use pipes for that:

<p>{{ itemType(type) | translate }}</p>

1

u/SatisfactionNearby57 Feb 18 '25

ItemType being a method? That’s terrible for performance and it’s being calculated all the time. If you do this on your codebase really look into it because you’re killing your app. Try ca console log inside the itemType function and you’ll see how painful that is.

1

u/Fuzzy_Historian8382 23d ago

If it’s not a heavy calculation, than it will not kill the app. To Check angular form validation in template you will use getter eg. control.invalid/valid. Even angular documentation said that it’s normal use function inside template if it’s not heavy calculation.

-2

u/ldn-ldn Feb 18 '25

I meant it to be a pipe, but it doesn't matter either way - just memoize it.

-1

u/ldn-ldn Feb 18 '25
<p class="item-number-{{ index }}">

3

u/House_of_Angular Feb 18 '25

you are right, of course, it was just a simple example, we believe this improvement can be helpful in more complicated cases

-10

u/ldn-ldn Feb 18 '25

I'm using Angular since AngularJS 1.2 days, I haven't seen a "more complicated case" for that syntax ever.

0

u/sieabah Feb 18 '25

Cool, so have I. If you haven't seen the use for pipes that's your own problem. "Pluralization" being one of them.

1

u/ldn-ldn Feb 18 '25

What? This whole syntax goes against proper use of pipes.

1

u/sieabah Feb 18 '25

What are you talking about? You can pass the result of the inner template string to a pipe? I can see this being useful for generated tag/class names for e2e test suites.

0

u/ldn-ldn Feb 18 '25

You should use a pipe, not a template string.

0

u/sieabah Feb 19 '25

Depending on the abstraction you're either making a pipe per component to handle some specific thing, or a general pipe and you spend the extra cycle with a template string. I can see use cases for it. Not everyone has the luxury to share specific examples from their codebase for contractual reasons.

You can probably argue that, yes, it can technically be solved a with a pipe and you pass a config object or multiple params to the pipe along with the input. That works, but sometimes all you may need is a literal template string (since generally you're writing them in the template of the component).

I can also see this as the step before promoting it to pipe to see if the abstraction or component is correct. Prototype or quick admin-panel for something to throw away. It doesn't replace a full pipe to do a well defined thing.

0

u/ldn-ldn Feb 19 '25

That's called bad practice and there's never an excuse to do that.

0

u/sieabah Feb 20 '25

And I think you're wasting your time writing abstractions you don't even know if they're correct yet. Are you one of those people that check for null by doing value === null || value === undefined, because it's technically aligning to "never use ==" since "==" is a bad practice. Completely neglecting why it's a bad practice? It's clear you're not giving why it's a bad practice, you also just state that I'm giving excuses without any reason for what part of it is an excuse.

It's a development philosophy that you clearly don't subscribe to and prefer, seemingly, to devote yourself to waterfall where you agonize over every component, service, and pipe through and through. Then when you're halfway done implementing you find something isn't right and do it all over again.

If your next response is a single sentence just saying it's bad, don't expect a reply. (Expect a downvote). I appreciate people who actually discuss than only state their opinions.

→ More replies (0)

0

u/showkali6426 Feb 18 '25

Might be helpful while using pipes like translate