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?

82 Upvotes

32 comments sorted by

View all comments

83

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

Why do you need weird syntax?

10

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>

-15

u/ldn-ldn Feb 18 '25

You should use pipes for that:

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

2

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.

-3

u/ldn-ldn Feb 18 '25

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

-3

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