This library use @ngx-translate dependencies and its own service to manage the translations in the language selects that can be by configuration and in case it is not configured by default the language of the browser.
This library works in Angular 6+
-
Download i18nlib from this url: https://github.com/mugan86/i18n-angular-6-or-more/blob/develop/publish/i18n-config-1.0.4.tgz
-
Taking into account where you have saved it, you will have to access where you have it.
$ npm install i18n-config --save
and then from your Angular AppModule:
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// Import our library
import { I18nConfigModule } from 'i18n-config';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify my library as an import
I18nConfigModule.forRoot() // to load default values ['en', 'es'], 'es'
// OR assign we want values (we must add langcode.json files in src/assets!!!)
I18nConfigModule.forRoot(['es', 'ca', 'pt', 'eu', 'en'], 'es')
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
then from your Angular AppComponent to use I18nConfigService to load translate files:
import { I18nConfigService } from 'i18n-config';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private langService: I18nConfigService) {}
}
If you select want language:
import { I18nConfigService } from 'i18n-config';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private langService: I18nConfigService) {
langService.useSelectLanguage('es'); //Load spanish language although i select from config basque
}
}
Finally, we must add the translation files to the correct directory, which will be in src/assets/i18n/select-language-code.json. For example for Spanish, we must add the file src/assets/i18n/es.json.
Now having all this correctly configured, we visualize it in the layout making use of Pipe 'translate'
{{ 'label' | translate}}
'label' is a one value that load text from .json
MIT © Anartz Mugika