I am seeking clarification on how to utilize the TranslocoService in TypeScript. Imagine I have two lang JSON files for Spanish and Portuguese named es.json and pt.json. Now, suppose I have a component that displays different labels as shown in the following code snippet:
import { TranslocoService } from '@ngneat/transloco';
...
@Component({
selector: 'app-powerbi',
templateUrl: './powerbi.component.html',
styleUrls: ['./powerbi.component.scss']
})
export class PowerbiComponent implements OnInit, OnDestroy {
...
contructor(
private cdRef: ChangeDetectorRef,
private powerbiService: PowerbiService,
private userservice: UserService,
private router: Router,
private loginservice: LoginService,
private store: Store<AppState>,
private translocoService: TranslocoService
)
{
translocoService.setAvailableLangs([{ id: 'es', label: 'Spanish' }, {id: 'pt', label: 'Portuguese'}])
}
...
var diccionarioReports = [
{
titulo: this.translocoService.translateObject('powerbi.label1'),
icono: 'grass',
condicion: true
},
{
titulo: this.translocoService.translateObject('powerbi.label2'),
icono: 'water_drop',
condicion: this.esCanha
}
]
}
I have attempted to omit irrelevant code. It is worth mentioning that my current knowledge on this subject is limited. However, when changing languages, the labels do not switch their language dynamically like HTML pipes do with transloco. How can I achieve dynamic language changes for these 'labels' without needing to reload? If further information is necessary, please feel free to ask.