Skip to content

i18n ICU expressions don't work in attributes #63827

Closed as duplicate
Closed as duplicate

Description

@wartab

Which @angular/* package(s) are the source of the bug?

localize, core

Is this a regression?

No

Description

Couldn't really find another issue, but using ICU expressions in HTML-attributes doesn't work or even breaks the parser when using variables in ICU expressions.

Can't get StackBlitz to work with @angular/localize, so I can't provide a minimal reproduction.

<!-- This will just show the text as present in the title attribute -->
<p i18n-title="@@test" title="Some Val: {someVal, select, 1 {ONE} 2 {TWO} other {OTHER}}">Hello</p>

<!-- This will fail to parse, see error below -->
<p i18n-title="@@test" title="Updated {someVal, plural, =0 {just now} =1 {one minute ago} other {{{ someVal }} minutes ago}}">Hello</p>

<!-- This however, works fine -->
<p i18n-title="@@test" title="Updated {{someVal}} minute(s) ago">Hello</p>

Given you can use variables in attributes and that they already correctly create placeholders when extracting i18n, I think attributes should also be able to use ICU expressions.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

X [ERROR] NG5002: Parser Error: Missing expected } at the end of the expression [{ someVal ]

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 20.3.1
Node: 22.13.1
Package Manager: npm 9.6.4
OS: win32 x64


Angular: 20.3.0
... common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                      Version
------------------------------------
@angular-devkit/architect    0.2003.1
@angular-devkit/core         20.3.1
@angular-devkit/schematics   20.3.1
@angular/build               20.3.1
@angular/cdk                 20.2.3
@angular/cli                 20.3.1
@angular/material            20.2.3
@schematics/angular          20.3.1
rxjs                         7.8.2
typescript                   5.8.3

Anything else?

No response

Activity

  1. JeanMeche commented on Sep 16, 2025

    @JeanMeche
    Member

    The workaround is to add a space:

    <p i18n-title="@@test" title="Updated {someVal, plural, =0 {just now} =1 {one minute ago} other { {{ someVal }} minutes ago}}">Hello</p>

  2. added this to the needsTriage milestone on Sep 16, 2025
  3. JeanMeche commented on Sep 16, 2025

    @JeanMeche
    Member

    It's actually a dupe of #9571

  4. wartab commented on Sep 16, 2025

    @wartab
    ContributorAuthor

    Only partially a duplicate.

    The ICU expression doesn't work at all in the attribute.

     <p i18n-title="@@test" title="Updated {someVal, plural, =0 {just now} =1 {one minute ago} other { {{ someVal }} minutes ago}}" #myP>Hello</p>
    
    <p>Title: {{$any(myP).attributes.title.textContent}}</p>
    Image
  5. JeanMeche commented on Sep 16, 2025

    @JeanMeche
    Member

    Which is then a dupe of #21615

  6. wartab commented on Sep 16, 2025

    @wartab
    ContributorAuthor

    Indeed, I hadn't found this when searching, thank you.

  7. angular-automatic-lock-bot commented on Oct 17, 2025

    @angular-automatic-lock-bot

    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.

  8. locked and limited conversation to collaborators on Oct 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions