I wanted to keep the translate feature simple. So, along with the existing text message, we are going to add a Translate button in the meta data column of the text message. Open clientappview-threadview-thread.component.html and after the Delete message section, add this code:

// SNIPP SNIPP
<!-- Any text message will have a nlpLanguage varible -->
<div *ngIf="message.nlpLanguage">
 <br>
 <button class="btn btn-info btn-block" type="button" (click)="translateMessage(message)"><i class="fa fa-arrows-h"></i> Translate Message</button>
</div>
// SNIPP SNIPP

Next, the required logic for translateMessage will be placed in clientappview-threadview-thread.component.ts and should be as shown here:

// SNIPP SNIPP
translateMessage(message: Message) {
 const modalRef = this.modal.open(TranslateMessageModal, {
 size: 'lg'
 });
 modalRef.componentInstance.message = message;
 modalRef.componentInstance.updateMessage.subscribe((msg) => {
 if (!msg) return;
 this.thread.messages.forEach((m) => {
 if (m._id === msg._id) {
 m = msg;
 }
 });
 });
}
// SNIPP SNIPP

Here, we are using the NgbModal instance to open translate message component, which we are going to create in a moment. Using the componentInstance on modalRef, we are sending the message to that component as input. Add this import to clientappview-threadview-thread.component.ts:

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

Now we will create the translate message modal component.