How to translate words in the component(.ts) Ngx Translation Angular

Question

I have this array from where I build the headers of a table, but I can't show the title according to the language. I am using ngx translate.

I have this in my html template:

  <thead>
                <tr>
                    <th>#</th>
                    <th *ngFor="let col of columns" class="cursor-pointer" (click)="sort(col.propertyName)">
                        {{col.label}}
                    </th>
                </tr>

            </thead>

I only get [object object]

I have this in my .ts component

columns = [
{ label: 'Nombre', propertyName: 'name' },
{ label: 'Imagen', propertyName: 'image' },
{ label: 'Descripción', propertyName: 'description' },
{ label: 'Categoria', propertyName: 'category' },
{ label: this.translateService.get('form.purchasePrice'), propertyName: 'purchase_price' },
{ label: 'Precio Unitario', propertyName: 'unit_price' },
{ label: 'Acción', propertyName: 'action' }];

Try with translateService get, instant,stream

but I don't get the desired result

question from:https://stackoverflow.com/questions/66048401/how-to-translate-words-in-the-component-ts-ngx-translation-angular

Answer 1

For every language you would have a separate file in your Angular applications assets:

• de.json
• en.json
• ...

Each of these translation files contains key-value pairs, i. e. en.json

{
  "MY_LABEL": "My translation text"
}

and de.json

{
  "MY_LABEL": "Mein übersetzungstext"
}

In your template you can then use the translate pipe as follows

{{ 'MY_LABEL' | translate }}

and ngx will chose the right translation file according to the language selected.

So your columns array should not contain the translated values. It should only contain the labels. The actual translated values should only appear in your translation file.

your.component.ts

columns = [
  { label: 'YOUR_COMPONENT-NOMBRE', propertyName: 'name' }
]

your.component.html

{{ col.label | translate }}

es.json

{
  'YOUR_COMPONENT-NOMBRE': 'nombre'
}

Following the usage guide you also have to do some configuration in your app module.