Right, it might cause duplication in ICU approach. I'd go with first solution then.
@Component({ selector: 'todo-state-i18n', template: ` <ng-container [ngSwitch]="key"> <span i18n *ngSwitchCase="todoState.TODO" title="not started" i18n-title>not started</ng-container> <span i18n *ngSwitchCase="todoState.IN_PROGRESS" title="started" i18n-title>started</ng-container> <span i18n *ngSwitchCase="todoState.DONE" title="finished" i18n-title>finished</ng-container> <span i18n *ngSwitchDefault title="not defined" i18n-title>not defined</ng-container> </ng-container> `, }) export class TodoStateI18n { // enum has to be accessed through class field todoState = TodoState; @Input() key: TodoState; }
Notes:
<ng-container>
title
<span>
i18n-title
If you use Ivy (and the best Angular 11.2+), there is new package @angular/localize, that can translate strings in TypeScript.
@angular/localize
So you could have re-usable function for providing messages:
getStateMessage(state: TodoState) { switch(state) { case TodoState.TODO: return $localize`not started`; case TodoState.IN_PROGRES: return $localize`started`; case TodoState.DONE: return $localize`finished`; default: return $localize`unknown`; } }
Wow, thanks for the really quick reply!
I thought that the first approach is not suitable for const enum, and since our company prefers using const enums I would rather not change that. Do you know any other way? If not, I will use the first approach anyway.
We don't use Ivy unfortunately.
Yep, it has to be regular enum.
I also maintain practice to keep const enum, but they do not fit in every use case. Overhead is slightly bigger but not crazy
Ok I will change it to a regular enum. Thank you for your help!
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Right, it might cause duplication in ICU approach. I'd go with first solution then.
Notes:
<ng-container>
anymore withtitle
attribute. I went with<span>
i18n-title
to translate attributeIvy update
If you use Ivy (and the best Angular 11.2+), there is new package
@angular/localize
, that can translate strings in TypeScript.So you could have re-usable function for providing messages:
Wow, thanks for the really quick reply!
I thought that the first approach is not suitable for const enum, and since our company prefers using const enums I would rather not change that. Do you know any other way? If not, I will use the first approach anyway.
We don't use Ivy unfortunately.
Yep, it has to be regular enum.
I also maintain practice to keep const enum, but they do not fit in every use case. Overhead is slightly bigger but not crazy
Ok I will change it to a regular enum. Thank you for your help!