Inside the clientappview-thread folder, create another folder named translate-message-modal, and inside that, create two files named translate-message-modal.html and translate-message-modal.ts. Update clientapp/view-thread ranslate-message-modal ranslate-message-modal.html, as shown here:

// SNIPP SNIPP
<div class="modal-header">
 <h4 class="modal-title">Translate Text</h4>
 <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('x')">
 <span aria-hidden="true">&times;</span>
 </button>
</div>
<div class="modal-body">
 <div class="card">
 <div class="card-body">
 <h5 class="card-title">Original Message</h5> {{message.description}}
 </div>
 </div>
 <div class="form-group">
 <label>Target Language</label>
 <select class="form-control" (change)="onChange($event.target.value)">
 <option *ngFor="let l of languages" [value]="l.code">{{l.name}}</option>
 </select>
 </div>
 <div class="card" *ngIf="targetLang && message.translations[targetLang]">
 <div class="card-body">
 <h5 class="card-title">Translated Message</h5> {{message.translations[targetLang]}}
 </div>
 </div>
 <ngb-alert type="danger" [dismissible]="false" *ngIf="error">
 <strong>Error!</strong> {{error.message || error}}
 </ngb-alert>
</div>
<div class="modal-footer">
 <i *ngIf="isProcessing" class="fa fa-circle-o-notch fa-spin fa-3x"></i>
 <button type="button" class="btn btn-success" [disabled]="isProcessing || !targetLang" (click)="translate()">Translate</button>
</div>
// SNIPP SNIPP

Here, we have a select box, using which the user will select a language to which the text needs to be translated to. When the user clicks on the Translate button, we will make a request to the translate API to get the translated message. Apart from that, we have the required error messages and loading indicators. For the required logic, we will get started by adding the imports to clientapp/view-thread ranslate-message-modal ranslate-message-modal.ts:

// SNIPP SNIPP
import { Component, Input, Output, EventEmitter, ViewChild, AfterViewInit } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { ActivatedRoute } from '@angular/router';
import { TranslateAPIService } from '../../services/translate.api.service';
// SNIPP SNIPP

We are going to create the missing dependencies in a moment. Next, we are going to define the TranslateMessageModal component as shown here:

// SNIPP SNIPP
@Component({
 selector: 'sm-create-asset-modal',
 templateUrl: './translate-message-modal.html'
})
export class TranslateMessageModal {
 @Input() message; // fetch from view-thread page
 @Output() updateMessage = new EventEmitter < any > (); // Update the view-thread component with updated message
 error: string = '';
 isProcessing: boolean = false;
 languages = [];
 targetLang = '';
}
// SNIPP SNIPP

The constructor will be as follows:

// SNIPP SNIPP
constructor(
 public activeModal: NgbActiveModal,
 public translateAPIService: TranslateAPIService,
 private route: ActivatedRoute
) {
 this.getSupportedLangs();
}
// SNIPP SNIPP

After the component has been initialized, we are going to fetch the list of supported languages. The logic for getSupportedLangs is as follows:

// SNIPP SNIPP
getSupportedLangs() {
 this.translateAPIService.getSupportedLanguages()
 .subscribe(data => {
 this.languages = data;
 this.languages.unshift({
 code: '',
 name: '--'
 });
 }, (err) => {
 console.error(err);
 })
}
// SNIPP SNIPP

When the DOM is finished initializing, we are going to make sure the translations property exists on the message. If we don't do this, we will face an error while working with messages that were created without the translations property:

// SNIPP SNIPP
ngOnInit() {
 this.message.translations = this.message.translations || {};
}
// SNIPP SNIPP

Next, we have the onchange event on the dropdown, where we update the class variable:

// SNIPP SNIPP
onChange(val) {
 this.targetLang = val;
}
// SNIPP SNIPP

Finally, here is the translate():

// SNIPP SNIPP
translate() {
 this.isProcessing = true;
 this.error = '';
 this.translateAPIService
 .translateText(this.message, this.targetLang)
 .subscribe((data) => {
 this.message = data;
 this.updateMessage.emit(data);
 this.isProcessing = true;
 }, (err) => {
 console.error(err);
 this.isProcessing = false;
 this.error = err;
 });
}
// SNIPP SNIPP

In this method, we pass the target language and the message to the server to get the translated text, and then update the view-thread with the updated message. This concludes our translate message modal component. Before we proceed, we need to add this component to clientappapp.module.ts. First, let's import TranslateMessageModal into clientappapp.module.ts:

// SNIPP SNIPP
import { TranslateMessageModal } from './view-thread/translate-message-modal/translate-message-modal';
// SNIPP SNIPP

Next, we will add this modal to declarations and entryComponents, as shown here:

// SNIPP SNIPP
declarations: [
        AppComponent,
        AboutComponent,
        RegisterComponent,
        LoginComponent,
        LogoutComponent,
        AccountComponent,
        AdminComponent,
        NotFoundComponent,
        HomeComponent,
        CreateThreadComponent,
        ViewThreadComponent,
        FilterThreadPipe,
        EditThreadComponent,
        UploadImageModal,
        UploadVideoModal,
        UploadAudioModal,
        TranslateMessageModal
    ],
    entryComponents: [
        UploadImageModal,
        UploadVideoModal,
        UploadAudioModal,
        TranslateMessageModal
    ],
// SNIPP SNIPP

Save all the files and we are good to move on.