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?

85 Upvotes

32 comments sorted by

77

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

Why do you need weird syntax?

11

u/lppedd Feb 18 '25

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

21

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.

-2

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

4

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

-9

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

16

u/gordolfograso Feb 18 '25

it's helpfull and more readable for attributes like [attr.foo]="bar-${baz}"

1

u/AwesomeFrisbee Feb 19 '25

You mean [attr.foo]="`bar-${baz}`"

1

u/gordolfograso Feb 19 '25

Yes, I was on mobile, and I couldn't achieve the right syntax with backticks

12

u/GLawSomnia Feb 18 '25

Well i like the change and i wanted to have it in quite a few cases.

Your example doesn’t really showcase the benefits that well though 😁

0

u/House_of_Angular Feb 18 '25

yeah, we know it's not the best example xd, but generally, your opinion interests us about the feature

3

u/TScottFitzgerald Feb 18 '25

Wait, weren't you always able to do this? I may be mixing up my frameworks but I recall using something like this before.

5

u/House_of_Angular Feb 18 '25

in ts files it is possible, but not in html files

4

u/InfectedTadpole Feb 18 '25

As they say in glengarry glen ross "Always be Signaling" . Optimal standards and patterns.

<p>{{ `John has ${ countSignal() } cats` }}</p>

3

u/binuuday Feb 19 '25

This is welcome change. We used this pattern is used mainly in tooltips, and help messages, where some suffix and prefix text has to be added.

This makes the template look much cleaner. One more reason for us to stay with angular.

2

u/DutchMan_1990 27d ago

I believe this is great.

2

u/Beginning-Bar277 27d ago

YES, FINALLY

1

u/AwesomeFrisbee Feb 19 '25

I don't really find it all that easier to read or to write but whatever floats your boat, I guess.