How to write i18n for ternary expression in Angular

Question

I need to internationalize a ternary expression with i18n in Angular. How to do this?

<ion-title i18n>{{currentStep === 0 ? 'New chat' : 'New room'}}</ion-title>

Answer 1

Ok, I got it. We can rewrite this expression in non-ternary and apply i18n directive.

<ion-title>
  <ng-container *ngIf="currentStep === 0; else newRoom" i18n="@@newChat">New chat</ng-container>
  <ng-template #newRoom i18n="@@newRoom">New room</ng-template>
</ion-title>

Answer 2

I would recommend creating two new translation keys then using either of those depending on the result of your ternary expressions's condition.

If that seems impossible, maybe check out ngx-translate if your environment allows using it. That would allow using translate pipes and/or instant translation of variables in situations like this one.