Repository navigation
Allow template literal in attribute with string record value #61572
Description
Which @angular/* package(s) are relevant/related to the feature request?
compiler
Description
It works :
@let widthPx = `${width}px`;
<div [ngStyle]="{ width: widthPx }"></div><div [ngStyle]="{ width: width + 'px' }"></div>It doesn't work :
<div [ngStyle]="{ width: `${width}px` }"></div>With this error message : Parser Error: Missing expected } at the end of the expression [{ width: `${width}px` }]
I wrote an angular-eslint rule prefer-template-literal to force writing in template literal but this limitation is very annoying because it applies the wrong fixes.
Proposed solution
<div [ngStyle]="{ width: `${width}px` }"></div>Alternatives considered
I could try to detect the special case in the lint rule to using @let but that would be really annoying
Reacted by Hans and Dave
Activity
fix(compiler): lexer support for template literals in object literals
fix(compiler): lexer support for template literals in object literals
fix(compiler): lexer support for template literals in object literals
fix(compiler): lexer support for template literals in object literals (…
fix(compiler): lexer support for template literals in object literals (…
fix(compiler): lexer support for template literals in object literals (…
angular-automatic-lock-bot commentedon Jun 26, 2025
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.