---
title: "Edit Angular translation files"
description: "How to use BabelEdit with Angular for translating your applications using @angular/localize, ngx-translate, or Transloco."
canonical: "https://www.codeandweb.com/babeledit/documentation/frameworks/angular"
product: "babeledit"
source: "html"
---

# Angular

## @angular/localize (XLIFF-Files)

BabelEdit supports Angular's native translation method using @angular/localize.

A complete tutorial is available from here:

*   [How to translate your Angular app with xlf files](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-xlf-files.md)

### XLIFF 1.2 / 2.0

BabelEdit is not a generic XLIFF editor. It supports only portions of the file format which is also used by the frameworks.

For [@angular/localize](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-xlf-files.md), we support XLIFF 1.2 - which is the default for Angular's extraction tool. The subset BabelEdit supports works with all steps in the translation workflow: Extraction, editing, importing.

## ngx-translate (JSON files)

Complete tutorials including a small demo project are available here:

*   [How to translate your Angular app with ngx-translate](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-ngx-translate.md)

The preferred layout for the ngx-translate project is to keep the translation files in your _assets/i18n_ folder and name the json files with the translations according to the language code:

*   assets‚
    *   i18n
        *   de.json
        *   en.json
        *   fr.json

You are of course free to give your files other names or store them elsewhere. Just make sure to configure ngx-translate according to your file layout.

ngx-translate supports all 3 JSON formats supported by BabelEdit:

*   [JSON with nested namespaces (Namespaced JSON)](https://www.codeandweb.com/babeledit/documentation/frameworks/json.md#namespaced-json)
*   [JSON with namespaces in key (Flat JSON)](https://www.codeandweb.com/babeledit/documentation/frameworks/json.md#flat-json)
*   [JSON with plaintext keys](https://www.codeandweb.com/babeledit/documentation/frameworks/json.md#plaintext-json)

If you use ngx-translate-extract (recommended!) to extract your translations and update your translation files make sure that the format you chose matches the file format set in BabelEdit's settings.

## Transloco (JSON files)

Please read this tutorial for details:

*   [How to translate your Angular app with Transloco](https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-transloco.md)

## In this section

- [Installation](https://www.codeandweb.com/babeledit/documentation.md)
- [Framework selection](https://www.codeandweb.com/babeledit/documentation/framework-selection.md)
- [Main screen](https://www.codeandweb.com/babeledit/documentation/main-screen.md)
- [Project configuration](https://www.codeandweb.com/babeledit/documentation/project-configuration.md)
- [Configure languages](https://www.codeandweb.com/babeledit/documentation/configure-languages.md)
- [Adding translations](https://www.codeandweb.com/babeledit/documentation/adding-translations.md)
- [Search & filters](https://www.codeandweb.com/babeledit/documentation/search-and-filters.md)
- [Editing tools](https://www.codeandweb.com/babeledit/documentation/editing-tools.md)
- [Import & export](https://www.codeandweb.com/babeledit/documentation/import-export.md)
- [.NET (.resx)](https://www.codeandweb.com/babeledit/documentation/frameworks/dotnet.md)
- [Ember.js](https://www.codeandweb.com/babeledit/documentation/frameworks/ember-js.md)
- [Flutter (.arb)](https://www.codeandweb.com/babeledit/documentation/frameworks/flutter.md)
- [Gettext (.po, .pot)](https://www.codeandweb.com/babeledit/documentation/frameworks/po-files.md)
- [i18next (json)](https://www.codeandweb.com/babeledit/documentation/frameworks/i18next.md)
- [Java](https://www.codeandweb.com/babeledit/documentation/frameworks/java.md)
- [JSON](https://www.codeandweb.com/babeledit/documentation/frameworks/json.md)
- [Laravel (php/json)](https://www.codeandweb.com/babeledit/documentation/frameworks/laravel.md)
- [React](https://www.codeandweb.com/babeledit/documentation/frameworks/react.md)
- [Ruby On Rails](https://www.codeandweb.com/babeledit/documentation/frameworks/ruby-on-rails.md)
- [Svelte](https://www.codeandweb.com/babeledit/documentation/frameworks/svelte.md)
- [Vue.js](https://www.codeandweb.com/babeledit/documentation/frameworks/vue-js.md)
- [YAML](https://www.codeandweb.com/babeledit/documentation/frameworks/yaml.md)
- [Overview](https://www.codeandweb.com/babeledit/documentation/features.md)
- [Machine Translation](https://www.codeandweb.com/babeledit/documentation/machine-translation.md)
- [ConsistencyAI](https://www.codeandweb.com/babeledit/documentation/consistency-ai.md)
- [Spell Checker](https://www.codeandweb.com/babeledit/documentation/spellchecker.md)
- [Similar Phrases](https://www.codeandweb.com/babeledit/documentation/translation-memory.md)