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();
  })
}
}

Does this answer your question? Use ngx-translate in component — Harun Yilmaz
– Harun Yilmaz, Commented May 19, 2022 at 12:39

Manish Patidar · Accepted Answer · 2022-05-12 05:27:05Z

1

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');

answered May 12, 2022 at 5:27

Manish Patidar

8347 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

konowo7640 · Accepted Answer · 2022-05-19 12:35:02Z

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, 2022 at 12:35

konowo7640

432 silver badges6 bronze badges

Collectives™ on Stack Overflow

ngx-translate usage in typescript Angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related