MODULE.SECTION.KEY_NAME

{
  "COMMON": {
    "BUTTONS": {
      "SAVE": "Guardar",
      "CANCEL": "Cancelar",
      "DELETE": "Eliminar",
      "CONFIRM": "Confirmar",
      "CLOSE": "Cerrar",
      "LOADING": "Cargando..."
    },
    "LABELS": {
      "SEARCH": "Buscar",
      "FILTER": "Filtrar",
      "ACTIONS": "Acciones"
    },
    "MESSAGES": {
      "SUCCESS": "Operación exitosa",
      "ERROR": "Ha ocurrido un error",
      "CONFIRM_DELETE": "¿Estás seguro de eliminar?"
    }
  },
  "COMPONENTS": {
    "DATA_TABLE": {
      "NO_DATA": "No hay datos disponibles",
      "LOADING": "Cargando datos...",
      "ROWS_PER_PAGE": "Filas por página",
      "OF": "de"
    },
    "MODAL": {
      "CLOSE": "Cerrar",
      "CONFIRM": "Confirmar",
      "CANCEL": "Cancelar"
    }
  }
}

import { TranslateModule } from "@ngx-translate/core";

@Component({
  selector: "ui-example",
  imports: [TranslateModule],
  template: ` <button>{{ "COMMON.BUTTONS.SAVE" | translate }}</button> `,
})
export class ExampleComponent {}

<!-- Translation with parameter -->
<p>{{ 'COMMON.MESSAGES.WELCOME' | translate:{ name: userName() } }}</p>

<!-- In JSON: "WELCOME": "Bienvenido, {{name}}" -->

{
  "ITEMS": {
    "COUNT_0": "Sin elementos",
    "COUNT_1": "1 elemento",
    "COUNT_OTHER": "{{count}} elementos"
  }
}

import { TranslateService } from "@ngx-translate/core";

export class ExampleComponent {
  private translate = inject(TranslateService);

  // For complex scenarios
  message = computed(() => this.translate.instant("COMMON.MESSAGES.SUCCESS"));
}

<!-- ❌ DON'T: Hardcoded text -->
<button>Save</button>
<button>Guardar</button>

<!-- ❌ DON'T: Mixed languages -->
<p>Click here to {{ 'ACTION' | translate }}</p>

<!-- ✅ DO: Full translation -->
<button>{{ 'COMMON.BUTTONS.SAVE' | translate }}</button>

{
  "COMPONENTS": {
    "BUTTON": {
      "LOADING": "Cargando..."
    },
    "INPUT": {
      "REQUIRED": "Este campo es requerido",
      "INVALID_EMAIL": "Email inválido"
    },
    "EMPTY_STATE": {
      "DEFAULT_TITLE": "Sin datos",
      "DEFAULT_MESSAGE": "No hay información disponible"
    },
    "DATA_TABLE": {
      "NO_RESULTS": "No se encontraron resultados",
      "LOADING": "Cargando...",
      "SELECT_ALL": "Seleccionar todo",
      "ROWS_PER_PAGE": "Filas por página",
      "PAGE_OF": "Página {{current}} de {{total}}"
    },
    "TOAST": {
      "CLOSE": "Cerrar"
    }
  }
}