Which @angular/* package(s) are relevant/related to the feature request?

compiler, localize

Description

example:

<span> {{ nikename ?? 'ano' }} </span>

for now to support i18n, I should rewrite those code:

<span> {{ nickname ?? $$ANO }} </span>

class MyComponent {
  readonly $$ANO = $localiza`:@@ANO:ano`;
}

or like:

<span>
  <ng-container *ngIf="nickname;else Str">{{nickname}}</ng-container>
  <ng-template #Str><ng-container i18n="@@ANO">ano</ng-container></ng-template>
<span>

Proposed solution

<span> {{ nikename ?? $localiza(':@@ANO:ano') }} </span>

after read the source code. I think inject an function for template is better choose then pipe.

those code will compile to on consts:

$localiza.trans[":@@ANO:ano"] = $localiza`:@@ANO:ano`

Tips

1. $localize only support string literal.

   eg: $localize(str_var) is no support, suppose use variable, why not str_var = $localize`text`

2. $localize only support one argument.

   suppose transform code:

   $localize(':@@MY_INTRO:my name is ', username, ', I\'m ', age ,' years old.')

   to

   $localize`:@@MY_INTRO:my name is \${name}， I'm ${age} years old.`;

   consider using html would get better readability and maintainability:

   <ng-container i18n="@@MY_INTRO">
     my name is {{name}}, I'm {{age}} years old.
   </ng-container>

Alternatives considered

noop

For now. I'm trying to make those code work in my project by hacking the source code. I hope someone could give me better suggest.

Relational link

• feat(compiler): support tagged template literals in code generator #39122
• ES6 Template literals inside angular expressions #35563 (comment)