Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / programming / localization

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

13 Jan 2024CPOL1 min read 5.3K  
Explore the seamless integration of @ngrx/translate with an Angular standalone API in this comprehensive guide, ensuring a smooth translation workflow for your applications.
This step-by-step guide empowers developers to effortlessly integrate the @ngrx/translate library with an Angular standalone API. From setting up the project to configuring translation assets and dynamically fetching translations from the API, this tutorial provides a clear roadmap for creating a robust translation infrastructure. Enhance your Angular applications with multilingual support using this comprehensive and practical 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.

tscript
// 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:

tscript
// 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:

tscript
// 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:

tscript
// 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

  • 14th January, 2024: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)