Skip to main content
DiscordGithub Tolgee jSGithub Tolgee Server

Tolgee for Angular

Angular
+
love
=
love

Tolgee for Angular provides simple API to create multi-lingual Angular application. With Tolgee i18n library for Angular you can enjoy all Tolgee i18n features.

To see Angular with Tolgee in action, check this example app.

npm i @tolgee/ngx @tolgee/ui

In-context localization 🐁

Tolgee for Angular is not just an i18n library. It provides much more. With in-context localization feature, you can just Alt + Click translations in your app and translate them directly. No more extracting, no more editing of .jsons or .xliff.

Localization platform ☁️

Tolgee localization platform provides simple user interface where, you can edit all your localization string. So you don't have to worry about choosing other tool for editing your translations. Tolgee and it's SDKs is all you need to localize your app.

Simple integration 🎉

To integrate Tolgee to Angular project, you can just simply follow these docs, or use integration guides in Tolgee platform. You can do that in less than one minute.

Automated screenshot generation 📸

With in-context localization UI, you can take screenshots of your application and uploaded them to Tolgee platform just by single click.

Open-source 📖

Tolgee platform and integration libraries are open-source. So you can self-host it and be fine!

Get started!

1. Create project in Tolgee platform

Go to Tolgee Cloud app or access your self-hosted instance and create a project. Then obtain your API key.

2. Setup Tolgee integration

Install the npm packages.

npm i @tolgee/ngx @tolgee/ui

Then import NgxTolgeeModule in your app

import { NgxTolgeeModule } from "@tolgee/ngx";import { UI } from "@tolgee/ui";import { NgModule } from '@angular/core';

@NgModule({  declarations: [    ...  ],  imports: [    ...,    NgxTolgeeModule.forRoot({      apiUrl: "https://app.tolgee.io",      apiKey: "<your api key>",      ui: UI    }),    ...,  ],  ...,})export class AppModule {}

3. Use elements with "t" attribute to translate

<h1 t key="translate_me" default="Translate me!"></h1>

Now you are able to Alt + Click & translate your texts!

Explore the Docs and check out example app!

Continue exploring...