ngx-translate-debug

Plugin for ngx-translate that helps debug translation keys

Usage no npm install needed!

<script type="module">
  import ngxTranslateDebug from 'https://cdn.skypack.dev/ngx-translate-debug';
</script>

README

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

  1. Use npm to install the package
npm i ngx-translate-debug
  1. Add custom parser for TranslateModule
import { NgxTranslateDebugParser } from 'ngx-translate-debug';

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

Usage

  1. Inject NgxTranslateDebugService in component's constructor
import { NgxTranslateDebugService } from 'ngx-translate-debug';

export class AppComponent {
  constructor(
    // ...
    public translateDebugService: NgxTranslateDebugService // <--- ADD THIS LINE
  ) {
    // ...
  }
}
  1. 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>
  1. 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 {}

Dependencies

@ngx-translate/core

License

MIT