ngx-translate extension to facilitate language cache for angular v18 and onwards.
npm install ngx-translate-cache-2ngx-translate-cache-2 version |
bash
$ npm install ngx-translate-cache --save
`
Usage
`typescript
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { TranslateCacheModule, TranslateCacheSettings, TranslateCacheService } from 'ngx-translate-cache';
@NgModule({
imports: [
TranslateModule.forRoot(),
TranslateCacheModule.forRoot({
cacheService: {
provide: TranslateCacheService,
useFactory: (translateService, translateCacheSettings) => {
return new TranslateCacheService(translateService, translateCacheSettings)
},
deps: [ TranslateService, TranslateCacheSettings ]
}
})
],
...
})
export class AppModule {}
`
$3
If you are using AoT [AoT compilation][aot-compiler-url]
or [Ionic][ionic-url], you must use an exported function instead of an inline function.
`ts
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { TranslateCacheModule, TranslateCacheSettings, TranslateCacheService } from 'ngx-translate-cache';
export function TranslateCacheFactory(translateService, translateCacheSettings) {
return new TranslateCacheService(translateService, translateCacheSettings);
}
@NgModule({
imports: [
TranslateModule.forRoot(),
TranslateCacheModule.forRoot({
cacheService: {
provide: TranslateCacheService,
useFactory: TranslateCacheFactory,
deps: [ TranslateService, TranslateCacheSettings ]
}
})
],
...
})
export class AppModule {}
`
$3
To initialize ngx-translate you usually do
`typescript
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app',
template:
})
export class AppComponent {
constructor(translateService: TranslateService) {
translateService.setDefaultLang('en');
translateService.use('en');
}
}
`
To initialize ngx-translate with ngx-translate-cache
`typescript
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { TranslateCacheService } from 'ngx-translate-cache';
@Component({
selector: 'app',
template:
})
export class AppComponent {
constructor(translateService: TranslateService,
translateCacheService: TranslateCacheService) {
translateService.setDefaultLang('en');
translateCacheService.init();
}
}
`
init method will subscribe to translateService.onLangChange event and update the cached language accordingly.
It also instruct ngx-translate to use the previous cached language if defined, or the browser current language if defined.
The order of precedence is as described below:
1. Cached language.
2. Current language of the browser.
3. Default language (language used as a fallback for ngx-translate).
You can also define the cache mechanism used (LocalStorage or Cookie), key used to store cached value and
cookie duration (defined in hours).
`typescript
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { TranslateCacheModule, TranslateCacheSettings, TranslateCacheService } from 'ngx-translate-cache';
@NgModule({
imports: [
TranslateModule.forRoot(),
TranslateCacheModule.forRoot({
cacheService: {
provide: TranslateCacheService,
useFactory: (translateService, translateCacheSettings) => {
return new TranslateCacheService(translateService, translateCacheSettings)
},
deps: [ TranslateService, TranslateCacheSettings ]
},
cacheName: 'mylang', // default value is 'lang'.
cacheMechanism: 'Cookie', // default value is 'LocalStorage'.
cookieExpiry: 1, // default value is 720, a month. Set to a negative value and the cookie becomes a session cookie.
cookieAttributes: 'SameSite=Strict; Secure' // no default, optional specification of additional attributes.
})
],
...
})
export class AppModule {}
``