ngx-translate usage in typescript Angular

Question

I'm using this @ngx-translate/core and @ngx-translate/http-loader i18n service and it works fine in templates (.html)

{{'title'|translate}}

Now I want to translate in my component typescript file (.ts) but I don't know how to use it.

I inject the translateService in contructor

constructor(private translate: TranslateService) {}

.component.ts

//update employee
editClick(item){
console.log(item);
this.emp=item;
this.ModalTitle="Edit Employee";  <-- Need to translate this using pipe
this.ActivateAddEditEmpComp=true;
}

//delete employee
deleteClick(item){
if(confirm('Are you sure??')){  <-- Need to translate this using pipe
  this.service.deleteEmployee(item.EmployeeId).subscribe(data=>{
    alert(data.toString());
    this.refreshEmpList();
  })
}
}

Check this:https://stackoverflow.com/questions/46155989/ngx-translate-with-dynamic-text-on-ts-file — Chellappan வ, May 12 '22 at 04:58
Does this answer your question? [Use ngx-translate in component](https://stackoverflow.com/questions/45314618/use-ngx-translate-in-component) — Harun Yilmaz, May 19 '22 at 12:39

score 1 · Answer 1 · answered May 12 '22 at 05:27

First import translate service

import { TranslateService } from '@ngx-translate/core';

Injext in the constructor:

constructor(
    public translate: TranslateService,
  )

And you can create a function or however you wanted to use inline you can do something like this.

translationMsg(key) {
    this.translate.get('key').subscribe((data) => {
      return data;
    });
  }

For your use case you can do this

this.ModalTitle = this.translationMsg('Edit_Employee');

score 1 · Answer 2 · answered May 19 '22 at 12:35

1

you can use instant or you can use the get method and later can subscribe.

this.ModalTitle = this.translate.instant('EDIT_EMPLOYEE')

Second Approach :

this.translate.get('EDIT_EMPLOYEE').subscribe((data) => {
  this.ModalTitle = data;
});

answered May 19 '22 at 12:35

konowo7640

23
1
6

ngx-translate usage in typescript Angular

2 Answers2