# Translation

The library uses [ngx-translate](https://github.com/ngx-translate/core) for internalization of the labels of the user interface. Currently, the library only supports English, but you can provide your own translations if you want to. If you use ngx-translate in your own project, you can still use our library's translations; for more information, see the [setup guide](https://getstream.io/chat/docs/sdk/angular/concepts/translation/#set-up-the-translations) below.

## Setup

You will always have to set up translations, even if you don't want to override the default translations.

### Install ngx-translate

`npm install @ngx-translate/core --save`

### Provide the translation service

Register the translation service using `provideTranslateService()`. If you're using standalone components, add it to your `app.config.ts`:

```typescript
import { ApplicationConfig } from "@angular/core";
import { provideTranslateService } from "@ngx-translate/core";

export const appConfig: ApplicationConfig = {
  providers: [provideTranslateService()],
};
```

Or if you're using an `NgModule`:

```typescript
import { NgModule } from "@angular/core";
import { provideTranslateService } from "@ngx-translate/core";
import { StreamChatModule } from "stream-chat-angular";

@NgModule({
  imports: [StreamChatModule],
  providers: [provideTranslateService()],
})
export class AppModule {}
```

>
> **Tip:** You should call `provideTranslateService()` at the application root (for example in `app.config.ts` or the root `AppModule`) even if the chat application is displayed from a lazy loaded route. If the translation isn't initialized properly the UI labels will be displayed as `"streamChat..."`.
>

The component that hosts the chat UI doesn't need to import anything from ngx-translate — the Stream components handle their own translations. Only if your own template uses the `translate` pipe or directive, import the standalone `TranslatePipe` / `TranslateDirective` into that component:

```typescript
import { Component } from "@angular/core";
import { TranslatePipe } from "@ngx-translate/core";
import {
  StreamAutocompleteTextareaModule,
  StreamChatModule,
} from "stream-chat-angular";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [TranslatePipe, StreamAutocompleteTextareaModule, StreamChatModule],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {}
```

### Set up the translations

Initialize the translation in the **constructor** of the component which displays the chat UI (for example `AppComponent`)

```typescript
import { StreamI18nService } from 'stream-chat-angular';

constructor(private streamI18nService: StreamI18nService) {
  this.streamI18nService.setTranslation();
}
```

>
> **Tip:** It's important to call the `setTranslation` in the constructor of the component that displays the chat UI. If the translation isn't initialized properly the UI labels will be displayed as `"streamChat..."`.
>

## Setup, if you're using ngx-translate in your project

### Register the service

If you are already using ngx-translate in your project, you have already called `provideTranslateService()` (or the equivalent) at your application root, so you **don't** need to register it again. To use the `translate` pipe or directive in your own templates, import the standalone `TranslatePipe` / `TranslateDirective` into the component (or module) that uses them.

### Register the translations

Our library will use the same `TranslateService` as your project, and the library will register the translations through the `StreamI18nService`. Here is how to do it (typically, you will be doing it in your `AppComponent`
):

```typescript
import { StreamI18nService } from 'stream-chat-angular';
import { TranslateService } from '@ngx-translate/core';

constructor(
  private streamI18nService: StreamI18nService,
  private translateService: TranslateService
) {
  this.translateService.getTranslation('en').subscribe(() => {
    this.streamI18nService.setTranslation('en');
  });
}
```

>
> **Tip:** The HTTP loader will override all registered translations. If you use that, it is necessary to wait for the HTTP loader to finish and only register the library's translations afterward (the code snippet above shows that scenario). Ngx-translate already has a [GitHub issue](https://github.com/ngx-translate/http-loader/issues/6#issuecomment-372118792) open to solve that problem.
>

>
> **Tip:** Our library uses the `streamChat` prefix for the translation keys, so you don't need to worry about translation keys clashing.
>

### Provide a custom language key

You can provide the language key for the translation registration:

```typescript
import { StreamI18nService } from 'stream-chat-angular';
import { TranslateService } from '@ngx-translate/core';

constructor(
  private streamI18nService: StreamI18nService,
  private translateService: TranslateService
) {
  this.translateService.getTranslation('de').subscribe(() => {
    this.streamI18nService.setTranslation('de');
  });
}
```

However, it is important to note that since our library currently only supports English, the translations will always be the same. You can also provide [custom translations](https://getstream.io/chat/docs/sdk/angular/concepts/translation/#custom-translation) for each language key, if you want to.

### Set the default language

For the translations to work, it is necessary to set the default language. Here are two different ways to do that:

```typescript
provideTranslateService({
  fallbackLang: "en",
});
```

or

```typescript
this.translateService.use("en");
```

## Custom translation

You can entirely or partially override the library's [default translations](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/assets/i18n/en.ts).

The `setTranslation` method of the `StreamI18nService` lets you to pass your own translations:

```typescript
import { StreamI18nService } from 'stream-chat-angular';

const customTranslations = {'Nothing yet...': 'This channel is empty'};

constructor(private streamI18nService: StreamI18nService) {
  this.streamI18nService.setTranslation('en', customTranslations);
}
```

You can see the list of translation keys [here](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/assets/i18n/en.ts).

You can override the entire translation or just some keys.

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/concepts/translation/](https://getstream.io/chat/docs/sdk/angular/concepts/translation/).