Translate strings inside Angular Typescript code

Question

Is it possible to translate strings inside the source code of a component in Angular6.

F. e.

window.confirm("HELP me");

I haven't found anything besides the normal translation for the HTML files (Angular Docs i18n).

Thank you in advance

Answer 1

You can use https://github.com/ngx-translate/i18n-polyfill until Angular i18n get built-in support for it, probably around version 9. The author is working on Angular i18n, so I think it is safe to trust his expectation that it will be close to the future feature in Angular i18n.

There is a lot of interesting information about the future of Angular i18n in this issue: https://github.com/angular/angular/issues/16477

Answer 2

i've tried a solution for that and it works, this how i managed it to translate my ngx-toaster alerts that are called inside my ts file, for example i have this:

ngOnInit() {
 this.toastrService.success('created successfully', '');
}

i converted it to this

@ViewChild('test') myDivElementRef: ElementRef;
...
constructor(private toastrService: ToastrService) {}
ngOnInit() {
this.toastrService.success(this.myDivElementRef.nativeElement.outerHTML, '', {
  enableHtml :  true
});

and in my template, i create a div with #test reference

<h2 i18n="@@testTitle" #test [hidden]="true">created successfully</h2>

Answer 3

In Material Angular 6:

import { locale as english } from './i19n/en';
import { locale as français } from './i19n/fr';
import { ToastrManager } from 'ng6-toastr-notifications';

Declaration

     @ViewChild('espiontest') myDivElementRef: ElementRef;

in constructor

    constructor(
      public toastr: ToastrManager){
    }

in your function or OnInt

    this.toastr.successToastr(this.myDivElementRef.nativeElement.outerHTML, null, {enableHTML: true});

In html, this element {{'Add_Profil_application_lang.Creationeffectuée' | translate}} is translation in files ./i19n/en and ./i19n/fr

<pre>
<p [hidden]="true">
   <span #espiontest>{{'Add_Profil_application_lang.Creationeffectuée' | translate}} 
</span>
</p>
</pre>