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

Google translate

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

Package detail