Transloco

"CONFIRM_DELETE": "Biztosan törölni szeretnéd a {{title}} tudásanyagot?"

<p-button (onClick)="onDeleteConfirmOpen(result.id, result.title)" />

protected onDeleteConfirmOpen(id: string, title: string): void {
    this.confirmationService.confirm({
      message: this.localizationService.translate('SHARED.CONFIRM_DELETE', { title }),
    });
}

label: this._localizationService.translate('SHARED.DELETE'),

[label]="`Médiumok felvétele a ${mediumType() === MediumType.PORTFOLIO ? 'portfólióba' : 'kedvencek közé'}`"

[label]="
        'MEDIUM.ADD_TO'
          | transloco
            : {
                type:
                  mediumType() === MediumType.PORTFOLIO
                    ? ('MEDIUM.PORTFOLIO' | transloco)
                    : ('MEDIUM.FAVORITES' | transloco)
              }
      "

"MEDIUM": {
    "ADD_TO": "Médiumok felvétele a {{ type }}",
    "PORTFOLIO": "portfólióba",
    "FAVORITES": "kedvencek közé"
  }

translocoService

import { TranslocoService } from '@jsverse/transloco';

@Injectable({ providedIn: 'root' })
export class ProfileOperationsService extends OperationsServicesBase {
  private readonly _transloco = inject(TranslocoService);

  public onPasswordChangeDialogOpen(): void {
    this._dialogRef = this._dialogService.open(ChangePwComponent, {
              header: this._transloco.translate('AUTH.CHANGE_PW_TITLE'),
      message: `${this._transloco.translate('MEDIUM.REMOVE_ARE_YOU_SURE')}<br /><br /><strong>${medium.name}</strong>`,
      data: {},
      closable: true,
      width: '720px'
    });
  }
}

transloco-loader.ts

import { HttpClient } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { Translation, TranslocoLoader } from '@jsverse/transloco';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
  private readonly _http = inject(HttpClient);

  public getTranslation(lang: string): Observable<Translation> {
    return this._http.get<Translation>(`/assets/locales/${lang}.json`);
  }
}

Localized URLs

import { TranslocoPipe, TranslocoService } from '@jsverse/transloco';

translocoService = inject(TranslocoService);

<a [routerLink]="['/',translocoService.getActiveLang(),'cookie-policy']">Cookie Policy</a>
<a [routerLink]="['/',translocoService.getActiveLang(),'terms-and-conditions']">Terms and conditions</a>
<a [routerLink]="['/',translocoService.getActiveLang(),'privacy-policy']">Privacy Policy</a>

Transloco with mock data

<ng-container *ngFor="let item of data; let i = index">
  <app-accordion
    [title]="item.title | transloco"
    [desc]="item.desc | transloco"
  />
</ng-container>

import { Injectable } from '@angular/core';
import { Card } from '@app/shared';

@Injectable({
  providedIn: 'root'
})
export class FaqService {
  public getData(): readonly Card[] {
    return [
      { title: 'FAQ_1.Q', desc: 'FAQ_1.A' },
      { title: 'FAQ_2.Q', desc: 'FAQ_2.A' },
      { title: 'FAQ_3.Q', desc: 'FAQ_3.A' },
    ];
  }
}

export class FaqComponent implements OnInit {
  private readonly _faqService = inject(FaqService);
  public data: readonly Card[];

  public ngOnInit(): void {
    this.data = this._faqService.getData();
  }
}

Story

decorators: [
  applicationConfig({
    providers: [importProvidersFrom(getTranslocoModule())],
  }),
],

{{ 'STORAGE.RENAME' | transloco }}

[modalTitle]="'STORAGE.RENAME' | transloco"

app.config.ts

import { registerLocaleData } from '@angular/common';
import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
import hu from '@angular/common/locales/hu';
import { APP_INITIALIZER, ApplicationConfig, isDevMode } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideTransloco } from '@jsverse/transloco';
import { TranslocoHttpLoader } from 'src/transloco-loader';

import { appRoutes } from './app.routes';
import { AppInitService } from './core';
import { apiInterceptor } from './core/interceptors/api.interceptor';

registerLocaleData(hu);

export function appInitProviderFactory(provider: AppInitService) {
  return (): Promise<void> => provider.initialize();
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(appRoutes),
    provideClientHydration(),
    provideHttpClient(withInterceptors([apiInterceptor]), withFetch()),
    {
      provide: APP_INITIALIZER,
      useFactory: appInitProviderFactory,
      deps: [AppInitService],
      multi: true
    },
    provideTransloco({
      config: {
        availableLangs: ['hu'],
        defaultLang: 'hu',
        prodMode: !isDevMode()
      },
      loader: TranslocoHttpLoader
    })
  ]
};

assets/locales/hu.json

{
  "MENU": {
    "HOME": "Kezdőlap"
  }
}