Multilingual UI with TranslationService and the t Pipe

src/app/core/i18n/translation.service.ts

<!-- Labels and headings -->
<span>{{ 'common.save' | t }}</span>
<h2>{{ 'receipts.title' | t }}</h2>

<!-- Input placeholder -->
<input [placeholder]="'common.search' | t" />

<!-- PrimeNG tooltip -->
<button
  pButton
  [pTooltip]="'common.back' | t"
  icon="pi pi-arrow-left"
></button>

<!-- PrimeNG dialog header -->
<p-dialog [header]="'shipments.confirmTitle' | t">
  ...
</p-dialog>

<!-- Toast (called from TypeScript — see below) -->

import { TranslationService } from 'src/app/core/i18n/translation.service';

@Component({ ... })
export class PackagesComponent {

  constructor(private translations: TranslationService) {}

  showError() {
    // Simple key lookup
    const message = this.translations.translate('packages.failed');
    this.messageService.add({ severity: 'error', summary: message });
  }

  showApplied(name: string) {
    // Dynamic text with a placeholder value
    const detail = this.translations.format('packages.appliedDetail', { name });
    this.messageService.add({ severity: 'success', detail });
  }
}

// Dictionary entry (in all three locales)
// 'packages.appliedDetail': 'Package {{name}} applied successfully'

// TypeScript call
const detail = this.translations.format('packages.appliedDetail', { name: pkg.code });

<!-- If you need dynamic text directly in a template, bind to a computed property -->
<span>{{ appliedMessage }}</span>