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
