CODEWITHSUNDEEP
angularngx-translate
Anonymous
Anonymous

Reputation: 11

ngx-translate usage in typescript Angular

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

Upvotes: 1

Views: 1028

Answers (2)

konowo7640
konowo7640

Reputation: 43

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

Upvotes: 1

Manish Patidar
Manish Patidar

Reputation: 804

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

Upvotes: 1

Related Questions