To get the supported languages and translate text, we are using Translate API service. Let's create this service now. Inside the clientappservices folder, create a file named translate.api.service.ts and update it as shown here:

// SNIPP SNIPP
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Message } from '../shared/models/message.model';

@Injectable()
export class TranslateAPIService {
 constructor(private http: HttpClient) {}
 getSupportedLanguages(): Observable < any > {
 return this.http.get < any > ('/api/supported-languages');
 }
 translateText(message: Message, targetLang: String): Observable < Message > {
 return this.http.post < Message > (`/api/translate-message/${targetLang}`, message);
 }
}
// SNIPP SNIPP

Finally, we need to add this service as a provider in clientappapp.module.ts. First, we will import TranslateAPIService into clientappapp.module.ts:

// SNIPP SNIPP
import { TranslateAPIService } from './services/translate.api.service';
// SNIPP SNIPP

We will also update the providers as shown here:

// SNIPP SNIPP
providers: [
 AuthService,
 AuthGuardLogin,
 AuthGuardAdmin,
 UserService,
 ThreadService,
 MessageService,
 VisionAPIService,
 VideoAPIService,
 AudioAPIService,
 TranslateAPIService,
 {
 provide: HTTP_INTERCEPTORS,
 useClass: TokenInterceptor,
 multi: true
 }
],
// SNIPP SNIPP

Save all the files to continue.