(eslint-plugin-template) Rule proposal: Equivalent of eslint rule prefer-template

[g-drouard]

Equivalent of prefer-template in template files.

With Angular 19.2 template literals expressions are supported : https://github.com/angular/angular/releases/tag/19.2.0

❌ Invalid Code :

<h1>{{ ('prefix-' + translateKey + '-suffix') | translate }}</h1>
<my-component [class]="'prefix-' + myClass + '-suffix'">...</my-component>

✅ Valid Code :

<h1>{{ `prefix-${translateKey}-suffix` | translate }}</h1>
<my-component [class]="`prefix-${myClass}-suffix`">...</my-component>

[JamesHenry]

Cool, thanks, makes sense to have a rule for this, PRs welcome!

@angular-eslint/template/prefer-template is probably not the most clear and obvious name given the overloading of the word "template" in the context of Angular.

Maybe (even though a little silly) @angular-eslint/template/prefer-template-in-template is a bit clearer, WDYT?

[g-drouard]

I tried a PR.
I put my questions/suggestions here :

• I named the rule prefer-template-literal to avoid ambiguity instead of prefer-template. I think the suggested name prefer-template-in-template is cumbersome. Do you have any other suggestion?
• Should we report/fix string concatenation that doesn't result in a template literal? I tried to report/fix them.
• Should we add it to the recommended rules? I think we can wait and see if the rule doesn't report any problems.
• While trying to test the @let I noticed that was not handled. Is there an issue in progress?

[rdamazio]

Just in case it saves anyone else time :) The right syntax is:

<my-component [class]="`prefix-${myClass}-suffix`">...</my-component>

NOT:

<my-component [class]="`prefix-{{myClass}}-suffix`">...</my-component>

(${} vs {{}})

Maybe a future version of this check, or a separate check, can tell if you try to use the wrong one in either context?

[JamesHenry]

This rule was added https://github.com/angular-eslint/angular-eslint/blob/9183385da258caaff6ff3817a6517665e48808b3/packages/eslint-plugin-template/src/rules/prefer-template-literal.ts