Living in a country where most people are either bilingual or trilingual (or even quadrilingual) is a blessing. But, it does make developing anything more complex as apps may need to cater for three or more languages. Displaying text is one thing, but getting user input in their preferred language is something else, especially when it comes to languages that many people aren’t used to typing like Sinhalese. For Angular based apps, an Angular Material transliterated input would be a great solution.
Fortunately, Google provides a (deprecated) Transliteration Service that comes to the rescue. It does a pretty good job with transliterating English typed text into a number of languages, guessing at which word a user might be getting at and providing suggestions.
I started wiring up an Angular Material transliterated input for a trilingual app that I was developing using Angular Material which has a customisable form field control. The first step is including Google’s Transliterate API.
<script type="text/javascript" src="https://www.google.com/jsapi">Now, the transliterate service, where all the magic happens. There’s an enumerable specifying the languages supported by the service. You can find the full list of languages and configurations for the Google Translate API on the official developer’s guide.
Then, the Angular Material transliterate input component.
Use it as you would use any form control. You can use an @input decorator to set the language.