Documentation: https://jsverse.gitbook.io/transloco

Example to use nest function in json file

json

// src/assets/i18n/en.json
{
  "app": {
    "title": "Welcome to the App!",
    "description": "This is an amazing app"
  },
  "home": {
    "greeting": "Hello, {{name}}!",
    "welcome": "Welcome back!"
  }
}

Typscript

import { Component } from '@angular/core';
import { TranslocoService } from '@ngneat/transloco';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  constructor(private translocoService: TranslocoService) {}

  // translate
  getGreeting(name: string) {
    return this.translocoService.translate('home.greeting', { name });
  }

  getWelcomeMessage() {
    return this.translocoService.translate('home.welcome');
  }
}

HTML

<div>
  <h1>{{ 'home.greeting' | transloco:{ name: 'John' } }}</h1>
  <p>{{ 'home.welcome' | transloco }}</p>
</div>