Angular 11 App Demo: Type in 23 Indian Languages

Are you creating an application targeting regional users? Do you need to provide your users a way to type in Indian languages? Are you using Angular? Here is a quick demo of how you can allow your Website users to easily type in Assamese, Bengali, Gujarati, Hindi, Malayalam, Tamil, Telugu and other 23 Indian languages.

Environment

• Angular 11
• PramukhIME Javascript Library 4.6 for typing in Indian Languages

Make sure you have Angular environment ready. Also download PramukhIME Javascript library from the above link.

Setup Angular Hello World

Here are the steps to setup a new Angular Hello World application. If you are already familiar with it, you may skip this section.

Open up command prompt and navigate to the directory where you want to create a new Angular application.

Execute following command to create a new Angular Hello World application

ng new pramukhime-example

It will ask you couple of questions. Choose answers based on your need. For this example, I have chosen following options.

Do you want to enforce stricter type checking(... and more)? - Yes
Would you like to add Angular routing? - Yes
Which stylesheet format would you like to use? - CSS

After waiting for a while, above commands generate the folder and adds necessary files.

Let’s go to the root project directory and launch the application.

cd "pramukhime-example"
ng serve --open

Above command compiles application and starts the browser with URL http://localhost:4200/

Integrate PramukhIME Javascript Library

Now you are ready to integrate PramukhIME Javascript Library within your project. Once you download the library zip file, unzip it on your local drive for quick use.

Copy the following files. If the destination folder does not exists, create it.

Open /pramukhime-example/angular.json and add pramukhime.js to “scripts” within projects> pramukhime-example > architect > build > options > scripts

"scripts": ["src/assets/pramukhime.js"]

Open /pramukhime-example/src/app/app.component.html file and add textbox right under the Website header.

<input type="text" id="myid" />

As soon as you add the above code and save file, it will reflect the change.

Initialize PramukhIME in ngOnInit of AppComponent. Here is a full pramukhime-example/src/app/app.component.ts file. You may disable PramukhIME in ngOnDestroy.

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'pramukhime-example';
  
  ngOnInit() { 
	pramukhIME.setLanguage('sanskrit', 'pramukhindic');
	pramukhIME.enable();
  }
  ngOnDestroy() {
    pramukhIME.disable();
  }
}

If you have “ng serve” command running, you may want to terminate the command using “Ctrl+C” and press “y” for confirmation. Then run the “ng serve –open” command again to start the Angular app.

Try to type “pramukham” in textbox and you will see the Sanskrit letters.

Download Example

Click on the following button to download the Angular 11 example

Download Angular Example

Unzip the file to your local machine.

Open command prompt and make unzipped folder as your current directory within command prompt using “cd” command.

Download latest version of PramukhIME Javascript Library for typing in Indian languages.

Copy the PramukhIME.d.ts and pramukhime.js as mentioned previously in this article.

Execute following command on command prompt to setup environment

npm install

Execute following command to start the application

ng serve --open

And now you will be able to type in Sanskrit in a textbox available on the top right corner.