AGoogTrans

An Angular V15 Translate Widget Library made using Google Translate's open-source API that is currently only supporting Angular Version 15 which is now accessible at npmjs.

Table of Contents

• Live Demo
• Features
• Install
• Currently Supported Languages
• Sample Code
• Options
• Project Configurations
• Improvement Checklist
• Useful Reference Documentation

Live Demo

Features

• Translate Language
• Display Translated Language's Flag

Install

npm install a-goog-trans

Currently Supported Languages

Language	Language Code
English	en
Filipino	tl
Hindi	hi
Indonesian	id
Japanese	ja
Korean	ko
Malay	ms
Chinese (PRC)	zh-CN
Thai	th
Chinese (TW)	zh-TW
Vietnamese	vi

Sample Code

app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AGoogTransModule } from 'a-goog-trans';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AGoogTransModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  languageToInclude: any = "";
  defaultLanguage: any = "en";
  domainName: any = "";
}

app.component.html

<a-goog-trans [languagesToInclude]="languagesToInclude" [defaultLanguage]="defaultLanguage" [domainName]="domainName"></a-goog-trans>

angular.json (assets for build and testing)

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/a-goog-trans/src/assets",
    "output": "/assets/"
  }
],

Options

Input Variables	Default Value
languagesToInclude	en,tl,id,ja,ko,ms,zh-CN,hi,th,zh-TW,vi
defaultLanguage	en
domainName	localhost

• To customize "languagesToInclude", just add the language code, i.e. "en,tl,id" with no spaces.
• To customize "defaultLanguage, just put in a single language code, i.e. "en".
• To customize "domainName", for development, use "localhost" and for deployment or production, use your website's domain name.

Improvement Checklist

Task	Last Modified	Status
Add Usage Details	10/07/2023	Completed
Add More Language Flags	10/07/2023	Pending
Angular Versionings	30/01/2023	TBC

Create Your Own

You can create your own Google Translator Widget by following the basic codes for the Google Translator Widget is accessible via (which is manually clonable at W3Schools Tutorial. As for the styling of the widget, you can refer to Useful Reference Documentation's links to find for relevant information.

Useful Reference Documentation

1. https://developers.google.com/admin-sdk/directory/v1/languages
2. https://www.w3schools.com/howto/howto_google_translate.asp
3. https://stackoverflow.com/questions/27935450/detect-google-website-translator-change-of-language
4. https://stackoverflow.com/questions/6633127/can-you-style-the-google-translate-plugin

License

MIT © Sia-WRWD

Back to Top