Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
angular-i18next
Advanced tools
i18next integration with angular 2.0+
1. Install package npm install angular-i18next --save
2. Import I18NextModule to AppModule
import { I18NextModule } from 'i18next';
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent
],
import: [
I18NextModule.forRoot()
]
})
export class AppModule {}
3. Inject I18NextService to AppComponent and call "init" method (with prefered options). Or use more advanced initialization.
export class AppComponent {
constructor(private i18NextService: I18NextService) {
return i18next.init({
whitelist: ['en', 'ru'],
fallbackLng: 'enu',
debug: true,
returnEmptyString: false,
ns: [
'translation',
'validation',
'error'
],
});
}
Use "i18next" pipe (or "i18nextCap" to capitalize translated text) to translate key:
<div>{{ 'test' | i18next }}</div>
Passing "t options":
<div>{{ 'test' | i18next: { count: 5, nsSeparator: '#' } }}</div>
Subscribing to event observables:
this.i18NextService.events.languageChanged.subscribe(lang => {
// do something
})
Add a provider to module/component if you want to prefix child i18next keys:
{
provide: I18NEXT_NAMESPACE,
useValue: 'feature' // set 'feature:' prefix
}
{
provide: I18NEXT_SCOPE,
useValue: 'person' // set 'person.' prefix
}
Translating strings in code. Inject I18NextPipe (or I18NextService) to service/component:
import { Injectable, Inject } from '@angular/core';
import { Title, DOCUMENT } from '@angular/platform-browser';
import { I18NextPipe } from './I18NextPipe';
@Injectable()
export class I18NextTitle extends Title {
constructor(private i18nextPipe: I18NextPipe, @Inject(DOCUMENT) doc) {
super(doc);
}
setTitle(value: string) {
return super.setTitle(this.translate(value));
}
private translate(text: string) {
return this.i18nextPipe.transform(text, { case: 'cap'});
}
}
Warning: Injection of I18NextService is possible, but it would not consider I18NEXT_NAMESPACE and I18NEXT_SCOPE providers
import { I18NextService } from 'i18next';
import * as i18nextXHRBackend from 'i18next-xhr-backend';
import * as i18nextLanguageDetector from 'i18next-browser-languagedetector';
...
i18next.use(i18nextXHRBackend)
.use(i18nextLanguageDetector)
.init(i18nextOptions)
Angular would not load until i18next initialize event fired
const PROVIDERS = [
{
provide: APP_INITIALIZER,
useFactory: (i18next: I18NextService) => () => {
return i18next.init();
},
deps: [I18NextService],
multi: true
}];
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
AppComponent
],
providers: [
PROVIDERS
]
})
export class AppModule {}
export class AppComponent implements OnInit {
constructor(private router: Router,
private title: Title,
private i18NextService: I18NextService) {
// page title subscription
// https://toddmotto.com/dynamic-page-titles-angular-2-router-events#final-code
this.router.events
.filter(event => event instanceof NavigationEnd)
.map(() => this.router.routerState.root)
.map(route => {
while (route.firstChild) route = route.firstChild;
return route;
})
.filter(route => route.outlet === 'primary')
.mergeMap(route => route.data)
.subscribe((event) => this.updatePageTitle(event['title']));
}
ngOnInit() {
this.i18NextService.events.languageChanged.subscribe(lang => {
let root = this.router.routerState.root;
if (root != null && root.firstChild != null) {
let data: any = root.firstChild.data;
this.updatePageTitle(data && data.value && data.value.title);
}
});
}
updatePageTitle(title: string): void {
let newTitle = title || 'application_title';
this.title.setTitle(newTitle);
}
}
Routes example:
const appRoutes: Routes = [
{
path: 'error',
component: AppErrorComponent,
data: { title: 'error:error_occured' }
},
{
path: 'denied',
component: AccessDeniedComponent,
data: { title: 'error:access_denied' }
}
];
FAQs
i18next module for Angular
The npm package angular-i18next receives a total of 17,641 weekly downloads. As such, angular-i18next popularity was classified as popular.
We found that angular-i18next demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.