Home  >  Angular

Angular i18n select and plural Language

By Arvind Rai, 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.



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> 
Look into the message format.
{company, select, a {ABC Ltd} b {PQR Ltd} other {unknown}} 
When the value of 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> 
When the value of 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> 
app.component.ts
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;
  }
} 
app.module.ts
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 
A file named as 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> 
For other languages, copy messages.xlf file in same location and rename it as below.
message.{locale}.xlf 
Suppose for French language (fr), file will be created as following.
messages.fr.xlf 
In 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.
Angular i18n select and plural Language

References

Angular Internationalization
Translate plurals

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI










©2022 concretepage.com | Privacy Policy | Contact Us