CODEWITHSUNDEEP
angulartypescripttransloco
user19580074
user19580074

Reputation:

How do I dynamically translate TypeScript components with transloco when I change the language?

I have a question regarding TranslocoService use in TypeScript. Let us say I have two lang JSON files for spanish and portuguese like es.json and pt.json. Now suppose I have a component somewhere that displays different labels like the following code

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 tried to omit the code that seemed irrelevant. Note that I don't have much knowledge of what I am doing due to the situation I am involved right now. But, when I change languages, those labels do not change their language like HTML pipes do with transloco. How do I make those 'labels' change dynamically without reloading? If more information is needed, ask for it please.

Upvotes: 0

Views: 2987

Answers (1)

Asif Karim Bherani
Asif Karim Bherani

Reputation: 1083

translocoService has the language change subscription which you can subscribe and then based on the change you should be able to update your labels

destroyed$ = new Subject<void>();

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'}])
    }
    
ngOnInit(): void {    this.translocoService.langChanges$.pipe(takeUntil(this.destroyed$)).subscribe((res) => {
                // If the file is empty that means no data found in cache and needs to wait for the data to be loaded successfully 
                if (_.isEmpty(this.translocoService.getTranslation(res))) {
                    this.subscription = this.translocoService.events$
                        .pipe(
                            filter((e) => e.type === 'translationLoadSuccess'),
                            takeUntil(this.destroyed$),
                        )
                        .subscribe((obj) => {
                            // Reload the translation here
                        });
                } else {
                    // Reload the translation here
                }
            });
}

ngOnDestroy() {
        this.destroyed$.next();
        this.destroyed$.complete();
    }

Upvotes: 1

Related Questions