AngularJS translation with pluralization using angular-translate

Question

Hello I need to make translations with pluralization depending on a value, but can't find how to do that.

for example I have variable peopleCount.

peopleCount = 1 translations should be: english: {{ peopleCount }} person likes this lithuanian: {{ peopleCount }} zmogus tai megsta
if peopleCount is more than 1 english translation would be: {{ peopleCount }} people like this.

but for lithuanian translations:

if peopleCount is between 2 and 9 or any number ending with those numbers except numbers which ends with numbers provided in 4th rule (example: 225, 249, 210 <--- these are correct numbers. and incorrent ones: 215, 250...). it would be {{ peopleCount }} zmones tai megsta
if count is between 10 and 20 or 30, 40 or any other number ending with a zero like 150 or 90 it would be {{ peopleCount }} zmoniu tai megsta

How do I accomplish that?

Just a note that proper English grammar would be "5 people like this" (not likes). — mkaj, Jan 07 '16 at 00:14

score 12 · Accepted Answer · edited Mar 11 '16 at 11:27

12

Angular-translate has service with functionality of MessageFormat which is really powerful and also has built-in locale for lithuanian. Article about MessageFormat and angular-translate.

Installing

You can install this package via bower:

$ bower install angular-translate-interpolation-messageformat

After that include necessary scripts with MessageFormat and angular-translate-interpolation-messageformat in that order:

<script src="path/to/messageformat.js"></script>
<script src="path/to/angular-translate-interpolation-messageformat.js"></script>

And finally in your config function call useMessageFormatInterpolation function from $translateProvider:

$translateProvider.useMessageFormatInterpolation();

Usage

After installing angular-translate-interpolation-messageformat into your app you can work with it.

For example, you can create english localization for code 'PEOPLE' as this:

{
    "PEOPLE" : "{peopleCount, plural, one {There is one man (in lithuanian)} few {# zmones tai megsta} other {# zmoniu tai megsta}}"
}

And than use it in your html like this:

<span translate="PEOPLE" translate-values="{peopleCount: 12}" translate-interpolation="messageformat"></span>

The output will be: "12 zmones tai megsta".

edited Mar 11 '16 at 11:27

sritmak

989
9
18

answered Jun 15 '15 at 14:29

Ilya Dmitriev

1,680
1
16
22

1

Still wondering if there is a way of making this with more options with some kind of statements instead of `one`, `few` and `other` ? – Einius Jun 16 '15 at 06:50
1

You can read more on [github](https://github.com/SlexAxton/messageformat.js/). There is also `select` declaration, which isn't trully statement, but maybe will be helpful for your needs. With select you can create something like this: `"PEOPLE" : "{peopleCount, select, 1 {one man} 2 {two men} other {# people}}"` – Ilya Dmitriev Jun 16 '15 at 06:56
How can the output be "12 zmones tai megsta", when the value of `peopleCount` is 5? 12 != 5 – cezar Feb 23 '16 at 12:26
It didn't work for me with `$translateProvider.useMessageFormatInterpolation();` but looking in the source code I found out I need `$translateProvider.addInterpolation('$translateMessageFormatInterpolation');` – Oded Peer Dec 18 '17 at 12:32

Arun Saragadam · Answer 2 · 2015-06-15T14:17:35.473

Something like this would work for your scenario:

<ng-pluralize count="peopleCount"
             when="{
                 'one': 'zmogus tai megsta',
                 'few': '{} zmones tai megsta',
                 'other': '{} zmoniu tai megsta'}">
</ng-pluralize>

You can look into this for more details. https://docs.angularjs.org/api/ng/directive/ngPluralize and for language specific plural strings here: http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html

score 0 · Answer 3 · answered Feb 21 '18 at 10:47

I achieved this without angular-translate-interpolation-messageformat

My case is:
I have resource bundle lables:
label.myItem=You have {{count}} item
label.myItems=You have {{count}} items

in HTML I have written like this:

<ng-pluralize count="itemCount"
       when="{'one':'{{&quot;label.myItem&quot; | translate:{count: itemCount} }}',
             'other':'{{&quot;label.myItems&quot; | translate: {count: itemCount} }}' }">
</ng-pluralize>

here itemCount will be a $scope variable.

By this way you no need to install any new angular Package.

Output is: When I have 1:

You have 1 item

When I have 2(More than 1):

You have 2 items

AngularJS translation with pluralization using angular-translate

3 Answers3