@Chirayuk @PascalPrecht

Better i18n
for your Angular apps

A first look at Angular's new i18n story

By Chirayu Krishnappa and Pascal Precht

Imagine you've successfully launched your web app.

What does internationalization (i18n) even mean?

  • Translating application messages... that's it right? No!
  • Localizing for each country and region should be easy
  • This is more than just changing locale, currency, date etc.


A good solution lets you localize your apps in whatever shape they are.

Limit is 255 characters.

What does the translator see?

(This is an example. Translators have more UI around this)

What "Limit"?!

What makes a high quality translation?

  • Translators really care about context
  • What does the word "crane" mean without context?
  • Screenshots of application views are even better
  • (And EVEN better) Live Previews

Limit is 255 characters.

<p i18n="Label to show the maximum length of characters allowed in comments.">
  Limit is 255 characters.

What does the translator now see?


  placeholder="Firstname Lastname">

We can provide default messages for common attributes.

Translator's view

  placeholder="Enter name"
  i18n-placeholder="Text input placeholder for the full name of a friend.">
WebComponents ready!

Translator's view


Limit is {{N}} characters.

What happens when there's an interpolation?

Translator's View

Translator's View

Plurals and Gender

  • Plural rules vary dramatically across languages.
  • Translator needs to add/remove categories as they apply to the target locale.
  • Existing is not declarative enough

How can we pluralize declaratively?

{{numMessages, plural,
      =0 { You have no new messages }
      =1 { You have one new message }
   other { You have # new messages }

What does the translator see?

{numMessages, plural,
      =0 { You have no new messages }
      =1 { You have one new message }
   other { You have # new messages }

Declarative Gender

{{friendGender, select,
       male { Invite him }
     female { Invite her }
      other { Invite them }

Similar to plurals. You can nest them or combine them in other ways.

Pseudotranslation to the rescue!

Pseudotranslation provides INSTANT translation into gibberish.

  • Sentences size doubled by repeating words
  • Characters munged in some way such as being accented
  • Brackets on either end to easily see text that's cut off



Enter your name

Pseudotranslated Message:

[Enter Ën̈ẗër̈ your ÿöür̈ name n̈äm̈ë]


Alright, when I can start?


  • Angular 1.4 is shipping with declarative support of plurals and gender. (MessageFormat)
  • Command line extraction tools are moving from prototype to production code (no timeline)
  • Angular 2 support begins next month



Wait, what about angular-translate?