https://github.com/kinleyrabgay/ngx-translate-db
Angular translation library using IndexedDB for storage
https://github.com/kinleyrabgay/ngx-translate-db
angular i18n indexed-db
Last synced: 8 months ago
JSON representation
Angular translation library using IndexedDB for storage
- Host: GitHub
- URL: https://github.com/kinleyrabgay/ngx-translate-db
- Owner: kinleyrabgay
- License: mit
- Created: 2025-03-11T11:20:44.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-03-11T12:11:30.000Z (8 months ago)
- Last Synced: 2025-03-11T12:28:54.455Z (8 months ago)
- Topics: angular, i18n, indexed-db
- Language: TypeScript
- Homepage:
- Size: 157 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-translate-db - A lightweight, efficient Angular translation library that uses IndexedDB for offline storage. (Development Utilities / Internationalization)
- awesome-angular - ngx-translate-db - A lightweight, efficient Angular translation library that uses IndexedDB for offline storage. (Development Utilities / Internationalization)
README
# ngx-translate-db
A robust, offline-first translation library for Angular applications with IndexedDB support.
## Features
- 🔄 Dynamic language switching
- 💾 Offline-first with IndexedDB storage
- 🚀 Reactive translations using Observables
- 🔍 Type-safe translation keys
- 📱 Memory efficient with automatic cleanup
- 🎯 Zero dependencies (except Angular core)
## Installation
```bash
npm install ngx-translate-db
```
## Quick Start
### 1. Configure in app.config.ts
```typescript
import { ApplicationConfig } from '@angular/core';
import { provideTranslate } from 'ngx-translate-db';
export const appConfig: ApplicationConfig = {
providers: [
// ... other providers
provideTranslate({
projectId: 'your-project-id',
endpoint: 'https://your-api-endpoint',
defaultLang: 'en',
apiKey: 'optional-api-key',
acceptedLanguages: ['en', 'fr', 'it', 'de', '...'],
}),
],
};
```
### 2. Use in Components
```typescript
import { Component } from '@angular/core';
import { TranslatePipe, TranslateService } from 'ngx-translate-db';
@Component({
selector: 'app-root',
template: `
{{ 'WELCOME_MESSAGE' | appTranslate | async }}
English
Français
`,
imports: [TranslatePipe],
standalone: true
})
export class AppComponent {
constructor(private translate: TranslateService) {}
changeLanguage(lang: string): void {
this.translate.setLanguage(lang);
}
}
```
### 3. Using the Translation Pipe
The `appTranslate` pipe is designed to be used with Angular's `async` pipe:
```html
{{ 'TRANSLATION_KEY' | appTranslate | async }}
{{ dynamicKey | appTranslate | async }}
```
## API Reference
### TranslateService
The core service for handling translations.
```typescript
class TranslateService {
// Get current language
get currentLanguage(): string;
// Get list of supported languages
get supportedLanguages(): string[];
// Change language
async setLanguage(lang: string): Promise;
// Get translation synchronously
instant(key: string): string;
// Get translation asynchronously
async translate(key: string): Promise;
// Observable for language changes
get onLangChange(): Observable;
}
```
### Configuration Options
```typescript
interface TranslationConfig {
projectId: string; // Your project identifier
endpoint: string; // API endpoint for fetching translations
defaultLang: string; // Default language to use
apiKey?: string; // Optional API key for authentication
acceptedLanguages: string[]; // List of supported languages
}
```
## Memory Management
The library is designed to be memory efficient:
- Uses Angular's async pipe for automatic subscription cleanup
- No memory leaks as subscriptions are properly managed
- Efficient change detection through Observable pattern
- IndexedDB for offline storage without memory overhead
## Performance Considerations
- Translations are cached in IndexedDB
- Change detection only triggers when needed
- Lazy loading of translations
- Efficient pipe implementation with minimal overhead
## Browser Support
- All modern browsers with IndexedDB support
- Fallback mechanism for older browsers
- Tested on latest Chrome, Firefox, Safari, and Edge
## Contributing
Contributions are welcome! Please read our contributing guidelines before submitting pull requests.
## License
MIT License - see LICENSE file for details