https://github.com/dineeek/ngx-google-translate-ui
Angular Material UI translation library based on Google Cloud Translation API.
https://github.com/dineeek/ngx-google-translate-ui
angular dialog google google-translate npm-package npmjs translation
Last synced: 6 months ago
JSON representation
Angular Material UI translation library based on Google Cloud Translation API.
- Host: GitHub
- URL: https://github.com/dineeek/ngx-google-translate-ui
- Owner: dineeek
- Created: 2021-02-07T08:02:05.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-10-28T09:35:14.000Z (over 2 years ago)
- Last Synced: 2025-07-01T03:05:35.318Z (about 1 year ago)
- Topics: angular, dialog, google, google-translate, npm-package, npmjs, translation
- Language: TypeScript
- Homepage:
- Size: 499 KB
- Stars: 1
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ngx-google-translate-ui
Angular Material UI library for Google Translate based on Google Cloud
Translation API.
[](https://GitHub.com/Naereen/StrapDown.js/graphs/commit-activity)
[](https://github.com/prettier/prettier)
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fdineeek%2Fngx-google-translate-ui?ref=badge_shield)
# 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](https://ngx-google-translate-ui.stackblitz.io)**
# Install
```shell
npm install ngx-google-translate-ui
```
# Usage
Google Translation API key is required to use this library.
**[Google cloud console](https://console.cloud.google.com)**
The translation process is analogous to Google Translate.
## Standalone component
```html
```
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.
```typescript
import { NgxGoogleTranslateUiComponent } from 'ngx-google-translate-ui';
openDialog () {
const dialogConfig: INgxGoogleTranslateUiDialogData = {
googleApiKey: '',
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.
```typescript
import { GoogleTranslationService } from 'ngx-google-translate-ui';
constructor (private googleTranslationService: GoogleTranslationService){}
this.googleTranslationService.getTranslations$(
'',
'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