An extensible library of ngx-translate for Angular Internationalization with more than 50+ spectacular features 🌈.

The objective of this library to extend the features of ngx-translate, fix the bugs which are opened since long on ngx-translate project.

For existing ngx-translate developer community

That's it.

How can be sure that after replacing the package name, everything will work as expected?

We have copied the spec from @ngx-translate/core project and follows the above mentioned steps, it's working as expected. Please refer the Spec Code Comparision Page.

💪 Features

Attribute Directive (Working Example of below features)

<span translate="introduction"></span>

<span translate="notification" [translateParams]="{name:'John'}"></span>

<span translate="note" translateLang="fr"></span>

<span translate="dashboardHeading" translationName="dashboard"></span>

Impure Pipe (Working Example of below features)

{{'greet' | translate}}

{{'notification' | translate:{name:'John'} }}

{{'note' | translate:{lang:'fr'} }}

{{'dashboardHeading' | translate:{translationName:'dashboard'} }}

Pure Pipe (Working Example of below features)

{{global.raw.notification | rxTranslate:{'name':'Munad'} }}

{{global.raw.notification | rxTranslate:{'name':name} }}

Decorator (Working Example of below features)

COMPONENT

@translate() global:{[key:string]:any};

HTML

{{global.introduction}}
{{global.notification}} // Not required to passing the parameter, automatically managed.

@translate({languageCode:'fr'}) global:{[key:string]:any}; // HTML binding is same as above.

@translate({translationName:'dashboard'}) dashboard:{[key:string]:any}; 

@translate({ filePath:"..."}) global:{[key:string]:any}; 

@translate({
  translationName: 'inliners',
  inlineTranslations: {
      en: () => import('./i18n/en.json'),
      fr: () => import('./i18n/fr.json')
  }
}) inline: any; // inline loader

@translateAsync({
    serviceModel: LanguageService,
    serviceMethod: LanguageService.prototype.get
}) languages : any[];

FormControl Validation Message Translation

1. Binds Validation message in errors object of FormControl, as per active language.
2. Binds Validation message with custom parameter.
3. Binds Validation message with array values.

Runtime Change Language By (Working Example of below features)

1. URL
2. Code

Structrual Directive (Working Example of below features)

<app-child *rxTranslate="true"></app-child>

Other Intuitive Features

1. Automatically set the page title.
2. Lazy Load Translation Files as per Angular PreLoadModule Stratergy.

Sanitizers

1. Currency
2. Date
3. Decimal
4. Percent
5. LowerCase
6. UpperCase
7. TitleCase
8. Custom

Ohh! We missed the initial configuration like module registration and all 😜, Don't worry that won't take much time, it's a one time configuration for accessing the services of translation throughout the application.

Installation

This package have dependency of @ngx-translate/core and @rxweb/translate.

npm install @rxweb/ngx-translate-extension

Now we are going to register the module in the root module of the application.

@NgModule({
  declarations: [...],
  imports: [
	TranslateModule.forRoot()
  ],
  providers: [],
  bootstrap: [...]
})
export class AppModule { }

one time component level code for setting up the default language and current language.

export class AppComponent {
    constructor(public translate: TranslateService) {
        translate.addLangs(['en', 'es','fr']);
        translate.setDefaultLang('en');

        const browserLang = translate.getBrowserLang();
        translate.use('en');
    }
}

All Done, Feel free to share your suggestions if something is missing or we enchance this package 🙂.

Contributing

If you are thinking to make rxweb framework better, that's truly great. You can contribute from a single character to core architectural work or significant documentation – all with the goal of making a robust rxweb framework which helps for everyone in their projects. Even if you are don’t feel up to writing code or documentation yet, there are a variety of other ways that you can contribute like reporting issues to testing patches.

Check out the docs on how you can put your precious efforts on the rxweb framework and contribute in the respective area.

Need Help

We highly recommend for help please ask your questions on our gitter/rxweb-project to get quick response from us. Otherthan our gitter channel you can ask your question on StackOverflow or create a new issue in our Github Repository.

For, issue please refer our issue workflow wiki for better visibility our issue process.

Feature Request

You can request a new feature by submitting an issue to our GitHub Repository. If you would like to implement a new feature, please submit an issue with a proposal for your work first, to be sure that we can use it.

License

MIT