Ngx-translate-debug NPM

ngx-translate-debug

Plugin for ngx-translate that helps debug translation keys 🔑

Here's the DEMO or edit on StackBlitz

Install

Make sure you have installed @ngx-translate library

Use npm to install the package

npm i ngx-translate-debug

Add custom parser for TranslateModule

import { NgxTranslateDebugParser } from 'ngx-translate-debug';

@NgModule({
  // ...
  imports: [
    // ...
    TranslateModule.forRoot({
      // ...
      parser: { provide: TranslateParser, useClass: NgxTranslateDebugParser }, // <--- ADD THIS LINE
    }),
  ]
})

Usage

Inject NgxTranslateDebugService in component's constructor

import { NgxTranslateDebugService } from 'ngx-translate-debug';

export class AppComponent {
  constructor(
    // ...
    public translateDebugService: NgxTranslateDebugService // <--- ADD THIS LINE
  ) {
    // ...
  }
}

Use methods of NgxTranslateDebugService

<button type="button" (click)="translateDebugService.toggleDebug()">
  Toggle debug mode
</button>

<button type="button" (click)="translateDebugService.enableDebug()">
  Enable debug mode
</button>

<button type="button" (click)="translateDebugService.disableDebug()">
  Disable debug mode
</button>

The plugin records the last state in window.localStorage['ngx-translate-debug']. You can change key by providing config in root module

import { NGX_TRANSLATE_DEBUG_CONFIG } from 'ngx-translate-debug';

@NgModule({
  // ...
  providers: [
    // ...
    {
      provide: NGX_TRANSLATE_DEBUG_CONFIG,
      useValue: {
        localStorageKey: 'any-custom-key',
      },
    },
  ],
})
export class AppModule {}