Integrating @ngrx/translate with Angular Standalone API: A Step-by-Step Guide

Introduction

Language localization is a crucial aspect of creating user-friendly applications, and when working with Angular, the @ngrx/translate library stands out as a powerful tool for managing translations. In this step-by-step guide, we will explore how to seamlessly integrate @ngrx/translate with an Angular standalone API, ensuring a smooth and efficient translation workflow.

Step 1: Setting Up Your Angular Project

Begin by creating a new Angular project using the Angular CLI:

ng new my-translate-app
cd my-translate-app

Step 2: Installing @ngrx/translate

Install the @ngrx/translate package and its dependencies:

ng add @ngrx/store
ng add @ngrx/effects
ng add @ngrx/entity
ng add @ngrx/store-devtools
ng add @ngrx/router-store
ng add @ngrx/component-store
ng add @ngrx/translate

Step 3: Configuring Translation Assets

Create a folder for your translation assets and add translation files, such as en.json and fr.json. These files will contain key-value pairs for translations.

Step 4: Configuring the Translation Module

Set up a translation module that initializes the @ngrx/translate library. Import the necessary modules and configure the translation assets.

// translation.module.ts

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { TranslateModule, TranslateLoader } from '@ngrx/translate';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { translationReducer } from './state/translation.reducer';
import { TranslationEffects } from './state/translation.effects';

@NgModule({
  declarations: [],
  imports: [
    HttpClientModule,
    StoreModule.forFeature('translation', translationReducer),
    EffectsModule.forFeature([TranslationEffects]),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (http: HttpClient) => new TranslateHttpLoader(http, './assets/i18n/', '.json'),
        deps: [HttpClient],
      },
    }),
  ],
  exports: [TranslateModule],
})
export class TranslationModule {}

Step 5: Loading Translations in App Initialization

Configure your Angular application to load translations during initialization. Update your app.module.ts:

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TranslationModule } from './translation/translation.module';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    TranslationModule,
    StoreModule.forRoot({}),
    EffectsModule.forRoot([]),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 6: Using Translations in Components

Now, you can use translations in your components. Import the TranslateService and use it to get translations dynamically:

// my-component.component.ts

import { Component } from '@angular/core';
import { TranslateService } from '@ngrx/translate';

@Component({
  selector: 'app-my-component',
  template: `
    <div>
      <p>{{ 'HELLO' | translate }}</p>
    </div>
  `,
})
export class MyComponent {
  constructor(private translateService: TranslateService) {}
}

Step 7: Fetching Translations from the API

If your translations are hosted on a standalone API, update the translation loader to fetch translations dynamically:

// translation.module.ts

import { TranslateHttpLoader } from '@ngrx/translate/http-loader';
import { HttpClient } from '@angular/common/http';

// ... other imports

@NgModule({
  // ... other module configurations
  imports: [
    // ... other imports
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (http: HttpClient) => new TranslateHttpLoader(http, '/api/translations', ''),
        deps: [HttpClient],
      },
    }),
  ],
  // ... other module configurations
})
export class TranslationModule {}

Conclusion

Integrating @ngrx/translate with an Angular standalone API allows you to manage translations seamlessly in your Angular applications. By following this step-by-step guide, you've set up a robust translation infrastructure that fetches translations dynamically from your API. This approach ensures that your application remains flexible and easily maintainable as it adapts to diverse language requirements. Happy coding!

History

• 14^th January, 2024: Initial version