@rachakondu-narayana/angular-multi-language-support

This Angular service integrates the Google Translate API to provide multi-language support for your Angular applications. It allows you to easily translate text between different languages.

Installation

To install the package, use the following npm command:

npm install google-api-wrapper-v1

Usage

1. Inject the Service in Your Component

Inject the GoogleApiWrapperService into your component and call the googleApi method to translate text.

import { Component, OnInit } from "@angular/core";
import { GoogleApiWrapperService } from "google-api-wrapper-v1";

@Component({
  selector: "app-translate",
  templateUrl: "./translate.component.html",
  styleUrls: ["./translate.component.css"],
})
export class TranslateComponent implements OnInit {
  constructor(private gls: GoogleApiWrapperService) {}

  async translate() {
    // Define the payload for translating text
    const payload = [
      [
        ["Morning", "Afternoon", "Night"],
        "en", // Source language (English)
        "te", // Target language (Telugu)
      ],
      "te_lib",
    ];

    // Call the Google Translate API service to get the translation
    try {
      const response = await this.gls.translateArrayData(payload);
      console.log({ response }); // Log the translated response
    } catch (error) {
      console.error("Error translating:", error); // Handle error
    }
  }

  ngOnInit() {
    // Call translate method when the component initializes
    this.translate();
  }
}

2. Response Format

The response from the googleApi method will be a translated array of strings, like this:

["ఉదయం", "మధ్యాహ్నం", "రాత్రి"]

This response contains the translated text, which you can use as needed in your Angular application.

3. Translate Object Example: fetchTranslatedObject Method

If you want to translate key-value pairs in an object, use the fetchTranslatedObject method. This method will allow you to send a JSON object, and it will return the translated key-value pairs.

Here's an example of how to use it:

import { Component, OnInit } from "@angular/core";
import { GoogleApiWrapperService } from "google-api-wrapper-v1";

@Component({
  selector: "app-translate",
  templateUrl: "./translate.component.html",
  styleUrls: ["./translate.component.css"],
})
export class TranslateComponent implements OnInit {
  constructor(private gls: GoogleApiWrapperService) {}

  async translateObject() {
    // Define the payload for translating text
    const payload = {
      data: JSON.stringify({
        greeting: "Good Morning",
        farewell: "Goodbye",
        question: "How are you?",
      }),
      selectedLanguage: "te", // Target language (Telugu)
    };

    // Call the Google Translate API service to get the translation
    try {
      const response = await this.gls.fetchTranslatedObject(payload);
      console.log({ response }); // Log the translated response
    } catch (error) {
      console.error("Error translating:", error); // Handle error
    }
  }

  ngOnInit() {
    // Call translate method when the component initializes
    this.translateObject();
  }
}

4. Response Format for fetchTranslatedObject

The response for fetchTranslatedObject will be an object with translated values:

{
  "greeting": "శుభోదయం",
  "farewell": "గుడ్‌బై",
  "question": "మీరు ఎలా ఉన్నారు?"
}

This object contains the translated text, which you can use in your Angular application as needed.

Notes:

• The googleApi method translates simple arrays of text.
• The fetchTranslatedObject method is used to translate key-value pairs in an object format.
• Both methods return promises, so you can handle them with async/await or .then().
• Since HttpClient is used in the service, make sure to import HttpClientModule in your main.ts (for standalone apps) or app.module.ts (for module-based apps).

License

MIT License

Support & Funding

If you find this package useful, please consider supporting its development.

How to Support:

• GitHub Sponsor: Sponsor Us

Your support helps us improve and maintain this project. Thank you! 🚀

Contact for Queries:

If you have any questions, feel free to reach out:
📧 Email: [email protected]