Numbers Produce Meaning

    @localization/l10n
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.7 • Public • Published

    @localization/l10n

    Pure Angular localization (l10n) library.

    npm version Build Status Known Vulnerabilities

    Demo

    Click here for preview

    Description

    • It's an Angular functional set (pipe, directive, service) used to localize application
    • Compatible with Angular 2+ versions
    • No external dependency
    • Supported some of the most used localization files: .properties, .po, .json
    • Load localization file/s when you need it
    • Easily manage localization storage
    • Customizable localization loader

    Tested with

    • Firefox (latest)
    • Chrome (latest)
    • Chromium (latest)
    • Edge
    • IE11

    Installing / Getting started

    npm install @localization/l10n

    Use the following snippet inside your app module:

    import { L10nModule, L10nService, LanguageCodes } from '@localization/l10n';
    ...
    ...
    
    @Injectable()
    export class LocalizationResolve implements Resolve {
    
        constructor(private localization: L10nService){
            this.localization.languageChanges.subscribe(({ code }) => {
                this.localization.setFromFile(`${code}.locales.properties`);
            })
        }
    
        public resolve(): Observable|Promise {
            return this.localization.setFromFile(`${this.localization.languageCode}.locales.properties`);
        }
    }
    
    @NgModule({
        imports: [
            BrowserModule,
            L10nModule.forRoot({ config: { defaultLanguage: LanguageCodes.EnglishUnitedStates } }),
            RouterModule.forRoot([
                { path: '', component: AppComponent, resolve: { localization: LocalizationResolve }}
            ])
        ],
        providers: [LocalizationResolve],
        bootstrap: [AppComponent]
    })
    export class AppModule {}

    Use the following snippet inside your component:

    import { L10nService } from '@localization/l10n';
    
    
    @Component({
      ...
    })
    export class AppComponent {
    
      constructor(private localization: L10nService) {
      }
    }

    Use the following snippet inside your template:

    <div l10n="app.hello.key" [l10n-args]="params"></div>
    <div l10n="app.hello.key" [l10n-args]="{value: 'world'}"></div>
    <div l10n="app.hello.key" l10n-args="{value: 'world'}"></div>
    
    <div [l10n]="'app.hello.key'" [l10n-args]="params"></div>
    <div [l10n]="'app.hello.key'" l10n-args="{value: 'world'}"></div>
    
    <div>{{'app.hello.key' | l10n:param }}</div>
    <div [innerHTML]="'app.hello.key' | l10n"></div>
    <div>{{'app.hello.key' | l10n: {'key': 'value'} }}</div>

    NativeScript

    tns plugin add @localization/l10n

    Use the following snippet inside your app module:

    import { L10nModule, L10nService, L10nBaseLoader } from '@localization/l10n';
    import { knownFolders } from "file-system";
    import { Subject, Observable, from } from 'rxjs';
    import { map } from 'rxjs/operators';
    import { Resolve } from "@angular/router";
    ...
    import { NativeScriptModule } from "nativescript-angular/nativescript.module";
    import { NativeScriptRouterModule } from "nativescript-angular/router";
    ...
    ...
    
    @Injectable()
    export class CustomLoader extends L10nBaseLoader {
    
        private readonly folderName = 'locales'; // folder where you place your locale files, 
                                                // in our case that is locales/en.locales.properties
        private readonly documents = knownFolders.currentApp();
        private readonly folder = this.documents.getFolder(this.folderName);
    
        public getFile({ url, code }: IL10nFileRequest ): Observable<IL10nLoaderResponse> {
            let fileType = this.getFileExtension( url );                           
            let file = this.folder.getFile(url);
    
            return from(file.readText())
                    .pipe(map((response) => {
                        return { response, fileType }
                    }));
        }
    }
    
    @Injectable()
    export class LocalizationResolve implements Resolve {
    
        constructor(private localization: L10nService){
            this.localization.languageChanges.subscribe(({ code }) => {
                this.localization.setFromFile(`${code}.locales.properties`);
            })
        }
    
        public resolve(): Observable|Promise {
            return this.localization.setFromFile(`${this.localization.languageCode}.locales.properties`);
        }
    }
    
    @NgModule({
        imports: [
            NativeScriptModule,
            L10nModule.forRoot({ 
                config: {defaultLanguage: LanguageCodes.EnglishUnitedStates, bindingProperty: 'text' },
                loader: CustomLoader
            }),
            NativeScriptRouterModule.forRoot([
                { path: '', component: AppComponent, resolve: { localization: LocalizationResolve }}
            ])
        ],
        providers: [
            LocalizationResolve,
            L10nService, // because currently NativeScript doesn\'t work with @Injectable({ providedIn: \'root\' })
            CustomLoader
        ],
        bootstrap: [AppComponent]
    })
    export class AppModule {}

    Use the following snippet inside your template:

    <ActionBar title="{{ 'app.header.title' | l10n }}" class="action-bar"></ActionBar>
    <ActionBar [title]="'app.hello.key' | l10n"></ActionBar>
    <Label text="{{'app.hello.key' | l10n }}"></Label>
    <Button text="{{'app.hello.key' | l10n }}" (tap)="onTap($event)"></Button>

    If bindingProperty in configuration is set to text l10 directive will use it as default element property

    <Label l10n="app.hello.key" [l10n-args]="params"></Label>
    <Label l10n="app.hello.key" [l10n-args]="{value: 'world'}"></Label>
    <Label l10n="app.hello.key" l10n-args="{value: 'world'}"></Label>
    
    <Label [l10n]="'app.hello.key'" [l10n-args]="params"></Label>
    <Label [l10n]="'app.hello.key'" l10n-args="{value: 'world'}"></Label>

    Developing

    Built With:

    • Angular
    • RxJS

    Setting up Dev

    This project was generated with Angular CLI version 6.0.7.

    Angular CLI must be installed before building L10n project.

    npm install -g @angular/cli
    git clone https://github.com/pIvan/l10n.git
    cd l10n/
    npm install
    npm run start

    Open "http://localhost:4200" in browser

    Versioning

    We use SemVer for versioning. For the versions available, see the link to tags on this repository.

    Tests

    This project was generated with Angular CLI version 6.0.7.

    Angular CLI must be installed before testing L10n project.

    npm install -g @angular/cli
    git clone https://github.com/pIvan/l10n.git
    cd l10n/
    npm install
    npm run test

    Contributing

    Want to help?

    Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our contributing guide and then check out one of our issues.

    Licensing

    L10n is freely distributable under the terms of the MIT license.

    Install

    npm i @localization/l10n

    DownloadsWeekly Downloads

    49

    Version

    2.1.7

    License

    MIT

    Unpacked Size

    519 kB

    Total Files

    29

    Last publish

    Collaborators

    • ipintar