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

2. 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';exportclassAppComponent{constructor(// ...publictranslateDebugService: NgxTranslateDebugService// <--- ADD THIS LINE){// ...}}

2. Use methods of NgxTranslateDebugService

<buttontype="button" (click)="translateDebugService.toggleDebug()">
Toggle debug mode
</button><buttontype="button" (click)="translateDebugService.enableDebug()">
Enable debug mode
</button><buttontype="button" (click)="translateDebugService.disableDebug()">
Disable debug mode
</button>

3. 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',},},],})exportclassAppModule{}

Dependencies

@ngx-translate/core

License

MIT