ngx-google-translate-ui

Angular Material UI library for Google Translate based on Google Cloud Translation API.

Features

• Text translation
• Auto language detection
• Multiple language translation
• Fast and reliable – uses the Google translate servers
• Copy translation result copied to clipboard per language or
• Copy all translations to clipboard as raw JSON data

View live demo on StackBlitz

Install

npm install ngx-google-translate-ui

Usage

Google Translation API key is required to use this library. Google cloud console

The translation process is analogous to Google Translate.

Standalone component

<ngx-google-translate-ui></ngx-google-translate-ui>

Library can be used as an standalone component without requiring any input values.

Dialog component

This library can be used as a dialog component.

Use INgxGoogleTranslateUiDialogData interface to provide initial dialog data.

import { NgxGoogleTranslateUiComponent } from 'ngx-google-translate-ui';

openDialog () {
  const dialogConfig: INgxGoogleTranslateUiDialogData = {
    googleApiKey: '<YOUR_GOOGLE_API_KEY>',
    translationText: 'How you doin?'
  };

  const dialogRef = this.dialog.open(NgxGoogleTranslateUiComponent, {
			data: dialogConfig,
			minWidth: '600px'
	})
}

Google translation service

Library exports GoogleTranslationService so it can be used separately from components.

The getTranslation$ method is used to fetch translations. It requires three parameters:

• apiKey - User's Google API key.
• targetLang - Language code used in translation - ISO-639 codes.
• text - Text to translate - one or multiple strings.
• errorCallback - Optional, custom error callback function. Defaulted to snackbar message and rethrow error.

import { GoogleTranslationService } from 'ngx-google-translate-ui';

constructor (private googleTranslationService: GoogleTranslationService){}

this.googleTranslationService.getTranslations$(
			'<YOUR_GOOGLE_API_KEY>',
			'en',
			['Whats up?', 'Nothing much!']
)

Exposed resources

Following resources can be imported from library:

• NgxGoogleTranslateUiModule
  • Exports the NgxGoogleTranslateUiComponent
• NgxGoogleTranslateUiComponent
  • Used outside templates
• INgxGoogleTranslateUiDialogData
  • Used when component is a dialog component
• GoogleTranslationService
  • Fetching Google translations
• IGoogleTranslationsData
  • The response of fetching translations
• IGoogleTranslation
  • The Google translations object

Contributing

Contributions are welcome!

License

Apache License

Copyright (c) 2023 Dino Klicek