Localized Route

component

import { LocalizeRoutePipe } from '../../shared/pipes/localize-route.pipe';

@Component({
  selector: 'app-home',
  imports: [RouterModule, LocalizeRoutePipe],
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})

template

[routerLink]="['profile'] | appLocalizeRoute"

[routerLink]="['/'].concat(['knowledge-base'] | appLocalizeRoute)"

localized-routes.ts

export const localizedRoutes: Record<string, Record<string, string>> = {
  hu: {
    home: 'kezdolap',
    'knowledge-base': 'tudasbazis',
    upload: 'feltoltes',
    'not-found': 'nem-talalhato',
    error: 'hiba'
  }
};

onClick method, ha a többi nem működik

providers: [LocalizeRoutePipe]
...
private readonly _router = inject(Router);
private readonly _translocoService = inject(TranslocoService);
private readonly _localizeRoutePipe = inject(LocalizeRoutePipe);
...
public navigateToProfile(): void {
    const lang = this._translocoService.getActiveLang();
    const route = this._localizeRoutePipe.transform(['/', lang, 'profile']);
    void this._router.navigate(route);
}

<p-button [label]="'SHARED.NEXT' | transloco" (onClick)="navigateToProfile()" />

localized-route.pipe.ts

import { inject, Pipe, PipeTransform } from '@angular/core';

import { LocalizationService } from '@/core/services/localization.service';

@Pipe({
  name: 'appLocalizeRoute',
  standalone: true
})
export class LocalizeRoutePipe implements PipeTransform {
  private readonly _localizationService = inject(LocalizationService);

  public transform(routeKeys: string[] | undefined, lang?: string): string[] {
    return this._localizationService.localizeRoute(routeKeys, lang);
  }
}

localization.service.ts

import 'dayjs/locale/hu';

import { DOCUMENT } from '@angular/common';
import { inject, Injectable } from '@angular/core';
import { Meta } from '@angular/platform-browser';
import { TranslocoService } from '@jsverse/transloco';
import dayjs from 'dayjs';
import { hu } from 'primelocale/js/hu.js';
import { Locale } from 'primelocale/js/locale.js';
import { PrimeNG } from 'primeng/config';
import { combineLatest, Subject, takeUntil } from 'rxjs';

import { localizedRoutes } from '@/localized-routes';

@Injectable({ providedIn: 'root' })
export class LocalizationService {
  private readonly _translocoService = inject(TranslocoService);
  private readonly _primeng = inject(PrimeNG);
  private readonly _meta = inject(Meta);
  private readonly _document = inject(DOCUMENT);
  private _destroySubject$!: Subject<void>;

  public init(destroySubject$: Subject<void>): void {
    this._destroySubject$ = destroySubject$;
    this._translocoService.langChanges$.pipe(takeUntil(this._destroySubject$)).subscribe((lang) => {
      this._setMeta(lang);
      this._primeng.setTranslation(this._getPrimengTranslations(lang));
      dayjs.locale(lang);
    });
  }

  public localizeRoute(routeKeys: string[] | undefined, lang?: string): string[] {
    if (!routeKeys || routeKeys.length === 0) {
      return ['/'];
    }

    const activeLang = lang || this._translocoService.getActiveLang();
    return routeKeys.map((key) => {
      return localizedRoutes[activeLang]?.[key] ?? key;
    });
  }

  private _setMeta(lang: string): void {
    this._document.documentElement.lang = lang;
    this._meta.updateTag({ name: 'language', content: lang });

    type MetaType = { AUTHOR: string; DESCRIPTION: string; KEYWORDS: string };

    combineLatest([this._translocoService.selectTranslateObject('META')]).subscribe(([meta]: [MetaType]) => {
      this._meta.updateTag({ name: 'author', content: meta.AUTHOR });
      this._meta.updateTag({ name: 'description', content: meta.DESCRIPTION });
      this._meta.updateTag({ name: 'keywords', content: meta.KEYWORDS });
    });
  }

  private _getPrimengTranslations(lang: string): Locale {
    switch (lang) {
      case 'hu':
        return hu;
      default:
        return hu;
    }
  }
}