Using Google Translation Service in Angular App https://medium.com/@ivywalobwa/use-google-translation-api-in-your-angular-app-d55096bbbe67

app.component.html

<h1>{{ data.title }}</h1>
<h2>{{ data.description }}</h2>
<p>{{ data.detail }}</p>

<label for="lang">Choose Language: </label>
<select id="lang" [formControl]="lang">
  <option value="en" selected>English</option>
  <option value="es">Spanish</option>
  <option value="de">German </option>
  <option value="ar">Arabic</option>
</select>

<button id="translatebtn" (click)="send()">Translate</button>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { SolutionService } from './services/solution.service';
import { Solution, GoogleObj } from './models/solution';
import { GoogletranslateService } from './services/googletranslate.service';
import { FormControl } from '@angular/forms';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  lang = new FormControl('en');
 
  data: Solution = {
    title: '',
    description: '',
    detail: ''
  };

  private translateBtn: any;

  constructor( private solution: SolutionService,private google: GoogletranslateService) {
  }

  ngOnInit() {
    this.solution.getSolution().subscribe(res => this.data = res);
    this.translateBtn = document.getElementById('translatebtn');
  }

   send() {
    const googleObj: GoogleObj = {
      q: [this.data.title, this.data.description, this.data.detail],
      target: this.lang.value
    };

    this.translateBtn.disabled = true;

    this.google.translate(googleObj).subscribe(
      (res: any) => {
        this.translateBtn.disabled = false;
        this.data = {
          title: res.data.translations[0].translatedText,
          description: res.data.translations[1].translatedText,
          detail: res.data.translations[2].translatedText
        };
        console.log(this.data);
      },
      err => {
        console.log(err);
      }
    );
  }


}

googletranslate.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { GoogleObj } from '../models/solution';

@Injectable({
  providedIn: 'root'
})

export class GoogletranslateService {
  url = 'https://translation.googleapis.com/language/translate/v2?key=';
<!-- add your API key-->
  key = '';
  constructor(private http: HttpClient) { }

  translate(obj: GoogleObj) {
    return this.http.post(this.url + this.key, obj);
  }
}

solution.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { Solution } from '../models/solution';

@Injectable({
  providedIn: 'root'
})
export class SolutionService {
  data = {
    title: '',
    description: '',
    detail: '',
  };

  constructor(private http: HttpClient) { }

  getSolution(): Observable<Solution> {
    return this.http.get<Solution>('assets/data.json')
      .pipe(
        map(res => {
          this.data.title = res.title;
          this.data.description = res.description;
          this.data.detail = res.detail;
          return this.data;
        })
      );
  }
}

solution.ts

export interface Solution {
  title: string;
  description: string;
  detail: string;
}

export interface GoogleObj {
  q: string[];
  target: string;
}