ngx-translate-cache

[![NPM version][npm-version-image]][npm-url]
[![MIT License][license-image]][license-url]

Based on and extension of [ngx-translate][ngx-translate-url].
This is basically a simplified version of [localize-router][localize-router-url].
If you are already using localize-router you don't need this extension.
This extension is aimed only to facilitate language cache with ngx-translate.

| Angular version | Integration branch | Library version |
|:---------------:|:------------------:|:---------------:|
| 8 and below | angular1-8 | ^0.0.0 |
| 9 | angular9 | ^9.0.0 |
| 10 | angular10 | ^10.0.0 |
| 11 | angular11 | ^11.0.0 |
| 12 | angular12 | ^12.0.0 |
| 13 | angular13 | ^13.0.0 |
| 14 | angular14 | ^14.0.0 |
| 15 | angular15 | ^15.0.0 |
| 16 | angular16 | ^16.0.0 |
| 17 | angular17 | ^17.0.0 |
| 18 | angular18 | ^18.0.0 |
| 19 | angular19 | ^19.0.0 |
| 20 | angular20 | ^20.0.0 |

Installation

To install this library, run:

``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 {}
``

License

MIT © Jaime

[npm-url]: https://www.npmjs.com/package/ngx-translate-cache
[npm-version-image]: https://badge.fury.io/js/ngx-translate-cache.svg

[license-image]: https://img.shields.io/npm/l/express.svg?style=flat
[license-url]: LICENSE

[ngx-translate-url]: https://github.com/ngx-translate/core
[localize-router-url]: https://github.com/Greentube/localize-router
[aot-compiler-url]: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
[ionic-url]: http://ionic.io/