Angular i18n select and plural Language
January 16, 2022
On this page we will learn using ICU select
and plural
message format for internationalization in our Angular application.
To create translation files for switch with conditional decision,
select
message format is useful.
For pluralization, ICU uses
plural
message format.
On this page we will create example using
select
and plural
message format and internationalizing them.
Contents
Technologies Used
Find the technologies being used in our example.1. Angular 13.1.0
2. @angular/localize 13.1.0
3. Node.js 12.20.0
4. NPM 8.2.0
Using select
The select
message format is used as following.
<div i18n> Ram works in {company, select, a {ABC Ltd} b {PQR Ltd} other {unknown}} company. </div>
{company, select, a {ABC Ltd} b {PQR Ltd} other {unknown}}
company
is a, output will be ABC Ltd .
When the value of company
is b, output will be PQR Ltd .
When the value of company
is anything else, output will be unknown .
Using plural
The plural
message format is used as following.
<div i18n> {minutes, plural, =0 {Just now} =1 {one minute ago} other {{{minutes}} minutes ago } } </div>
minutes
is 0, output will be Just now .
When the value of minutes
is 1, output will be one minute ago .
When the value of minutes
is anything else, suppose 5, output will be 5 minutes ago .
Using plural
and select
Together
Find the text using both select
and plural
message format.
<div i18n> Task completed {minutes, plural, =0 {Just now} =1 {one minute ago} other {{{minutes}} minutes ago} } by {role, select, dir {Director} man {Manager} other {Anonymous}} </div>
Complete Example
app.component.html<div> Company : <select [(ngModel)]="company"> <option value="a">ABC Ltd</option> <option value="b">PQR Ltd</option> <option value="c">XYZ Ltd</option> </select> Role : <select [(ngModel)]="role"> <option value="dir">Director</option> <option value="man">Manager</option> <option value="dev">Developer</option> </select> </div> Time: <button (click)="inc(1)">+</button> <button (click)="inc(-1)">-</button> <h3>Using select</h3> <div i18n> Ram works in {company, select, a {ABC Ltd} b {PQR Ltd} other {unknown}} company and his designation is {role, select, dir {Director} man {Manager} other {not known}}. </div> <h3>Using plural</h3> <div i18n> Task completed {minutes, plural, =0 {Just now} =1 {one minute ago} other {{{minutes}} minutes ago} } </div> <h3>Using plural and select Together</h3> <div i18n> Task completed {minutes, plural, =0 {Just now} =1 {one minute ago} other {{{minutes}} minutes ago} } by {role, select, dir {Director} man {Manager} other {Anonymous}} </div>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { company = 'a'; role = 'dir'; minutes: number = 0; inc(i: number) { this.minutes = this.minutes + i; } }
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [BrowserModule, FormsModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }
Create Translation Files
Run ng extract-i18n command from root directory of the project.ng extract-i18n --output-path src/locale
messages.xlf
will be created in src/locale directory.
messages.xlf
<?xml version="1.0" encoding="UTF-8" ?> <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"> <file source-language="en-US" datatype="plaintext" original="ng2.template"> <body> <trans-unit id="2084179943450370431" datatype="html"> <source> Ram works in <x id="ICU" equiv-text="{company, select, a {ABC Ltd} b {PQR Ltd} other {unknown}}" xid="3961090000177065283"/> company and his designation is <x id="ICU_1" equiv-text="{role, select, dir {Director} man {Manager} other {not known}}" xid="7308830297235427139"/>. </source> <context-group purpose="location"> <context context-type="sourcefile">src/app/app.component.html</context> <context context-type="linenumber">17,20</context> </context-group> </trans-unit> <trans-unit id="3961090000177065283" datatype="html"> <source>{VAR_SELECT, select, a {ABC Ltd} b {PQR Ltd} other {unknown}}</source> <context-group purpose="location"> <context context-type="sourcefile">src/app/app.component.html</context> <context context-type="linenumber">18</context> </context-group> </trans-unit> <trans-unit id="7308830297235427139" datatype="html"> <source>{VAR_SELECT, select, dir {Director} man {Manager} other {not known}}</source> <context-group purpose="location"> <context context-type="sourcefile">src/app/app.component.html</context> <context context-type="linenumber">19</context> </context-group> </trans-unit> <trans-unit id="7295736171122793763" datatype="html"> <source> Task completed <x id="ICU" equiv-text="{minutes, plural, =0 {Just now} =1 {one minute ago} other {{{minutes}} minutes ago} }" xid="2821094250842634583"/> </source> <context-group purpose="location"> <context context-type="sourcefile">src/app/app.component.html</context> <context context-type="linenumber">22,28</context> </context-group> </trans-unit> <trans-unit id="2905663687124825535" datatype="html"> <source>{VAR_PLURAL, plural, =0 {Just now} =1 {one minute ago} other {<x id="INTERPOLATION"/> minutes ago}}</source> <context-group purpose="location"> <context context-type="sourcefile">src/app/app.component.html</context> <context context-type="linenumber">23,27</context> </context-group> <context-group purpose="location"> <context context-type="sourcefile">src/app/app.component.html</context> <context context-type="linenumber">31,35</context> </context-group> </trans-unit> <trans-unit id="2750104478653002620" datatype="html"> <source> Task completed <x id="ICU" equiv-text="{minutes, plural, =0 {Just now} =1 {one minute ago} other {{{minutes}} minutes ago} }" xid="2821094250842634583"/> by <x id="ICU_1" equiv-text="{role, select, dir {Director} man {Manager} other {Anonymous}}" xid="8381449721135949399"/> </source> <context-group purpose="location"> <context context-type="sourcefile">src/app/app.component.html</context> <context context-type="linenumber">30,37</context> </context-group> </trans-unit> <trans-unit id="8381449721135949399" datatype="html"> <source>{VAR_SELECT, select, dir {Director} man {Manager} other {Anonymous}}</source> <context-group purpose="location"> <context context-type="sourcefile">src/app/app.component.html</context> <context context-type="linenumber">36</context> </context-group> </trans-unit> </body> </file> </xliff>
messages.xlf
file in same location and rename it as below.
message.{locale}.xlf
messages.fr.xlf
messages.fr.xlf
, copy the text of <source>
tag and create as <target>
tag and translate text of this tag in French language.
<trans-unit id="2905663687124825535" datatype="html"> <source>{VAR_PLURAL, plural, =0 {Just now} =1 {one minute ago} other {<x id="INTERPOLATION"/> minutes ago}}</source> <target>{VAR_PLURAL, plural, =0 {Juste maintenant} =1 {il y a une minute} other {<x id="INTERPOLATION"/> il y a quelques minutes}}</target> ------ </trans-unit>
Run Application
To run the application, find the steps.1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Add
@angular/localize
library.
4. Run ng serve using command prompt.
5. Access the URL http://localhost:4200
Find the print screen of the output.

References
Angular InternationalizationTranslate plurals