{"id":23663446,"url":"https://github.com/eyolas/ng2-intl","last_synced_at":"2025-09-01T17:31:51.281Z","repository":{"id":54835140,"uuid":"70183827","full_name":"eyolas/ng2-intl","owner":"eyolas","description":"Internationalize Angular2 apps. This library provides Angular2 components, pipe and an API to format dates, numbers, and strings, including pluralization and handling translations. Inspired by react-intl","archived":false,"fork":false,"pushed_at":"2021-02-12T13:50:13.000Z","size":186,"stargazers_count":7,"open_issues_count":3,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T21:44:11.741Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eyolas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-06T18:59:02.000Z","updated_at":"2023-08-21T11:24:49.000Z","dependencies_parsed_at":"2022-08-14T04:20:13.786Z","dependency_job_id":null,"html_url":"https://github.com/eyolas/ng2-intl","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eyolas%2Fng2-intl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eyolas%2Fng2-intl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eyolas%2Fng2-intl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eyolas%2Fng2-intl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eyolas","download_url":"https://codeload.github.com/eyolas/ng2-intl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231704993,"owners_count":18413940,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-29T05:28:22.360Z","updated_at":"2024-12-29T05:28:22.973Z","avatar_url":"https://github.com/eyolas.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Ng2 Intl\n==========\n\nInspired by [ng2-translate][] (setup is similary) and [react-intl][] (same api)\n\n\nInternationalize [Angular2][] apps. This library provides angular2 components, pipe and an API to format dates, numbers, and strings, including pluralization and handling translations.\n\n[![npm Version][npm-badge]][npm]\n[![Dependency Status][david-badge]][david]\n\nOverview\n--------\n\n**Ng2 Intl use [FormatJS][].** It provides bindings to angular 2 via its components, pipe and API.\n\n## Features\n\n- Display numbers with separators.\n- Display dates and times correctly.\n- Display dates relative to \"now\".\n- Pluralize labels in strings.\n- Support for 150+ languages.\n- Runs in the browser and Node.js.\n- Built on standards.\n\n## Installation\nFirst you need to install the npm module:\n```sh\nnpm install ng2-intl --save\n```\n\n## Usage\n#### 1. Import the `IntlModule`:\nFinally, you can use ng2-intl in your Angular 2 project.\nIt is recommended to import `IntlModule.forRoot()` in the NgModule of your application.\n\n\nThe `forRoot` method is a convention for modules that provide a singleton service (such as the Angular 2 Router), you can also use it to configure the `IntlModule` loader. By default it will use the `IntlStaticLoader`, but you can provide another loader instead as a parameter of this method (see below [Write \u0026 use your own loader](#write--use-your-own-loader)).\n\nFor now ng2-intl requires HttpModule from `@angular/http` (this will change soon).\n\n\n```ts\nimport {BrowserModule} from \"@angular/platform-browser\";\nimport {NgModule} from '@angular/core';\nimport {HttpModule} from '@angular/http';\nimport {IntlModule} from 'ng2-intl';\n\n@NgModule({\n    imports: [\n        BrowserModule,\n        HttpModule,\n        IntlModule.forRoot()\n    ],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nIf you have multiple NgModules and you use one as a shared NgModule (that you import in all of your other NgModules), don't forget that you can use it to export the `IntlModule` that you imported in order to avoid having to import it multiple times.\n\n```ts\n@NgModule({\n    imports: [\n        BrowserModule,\n        HttpModule,\n        IntlModule.forRoot()\n    ],\n    exports: [BrowserModule, HttpModule, IntlModule],\n})\nexport class SharedModule {\n}\n```\n\nBy default, only the `IntlStaticLoader` is available. It will search for files in i18n/*.json, if you want you can customize this behavior by changing the default prefix/suffix:\n\n```ts\n@NgModule({\n    imports: [\n        BrowserModule,\n        HttpModule,\n        IntlModule.forRoot({ \n          provide: IntlLoader,\n          useFactory: (http: Http) =\u003e new IntlStaticLoader(http, '/assets/i18n', '.json'),\n          deps: [Http]\n        })\n    ],\n    exports: [BrowserModule, HttpModule, IntlModule],\n})\nexport class SharedModule {\n}\n```\n\n#### 2. Init the `IntlService` for your application:\n\n```ts\nimport {Component} from '@angular/core';\nimport {IntlService} from 'ng2-intl';\n\n@Component({\n    selector: 'app',\n    template: `\n        \u003cdiv\u003e{{ 'HELLO' | formattedMessage:{values: param} }}\u003c/div\u003e\n    `\n})\nexport class AppComponent {\n    param: string = \"world\";\n\n    constructor(intlService: IntlService) {\n        // this language will be used as a fallback when a translation isn't found in the current language\n        intlService.setDefaultLang('en');\n\t\t\n\t\t// initialize the download of the default lang\n\t\tintlService.start();\n\n         // the lang to use, if the lang isn't available, it will use the current loader to get them\n        intlService.use('fr');\n    }\n}\n```\n\n#### Write \u0026 use your own loader\nIf you want to write your own loader, you need to create a class that implements `IntlLoader`.\nThe only required method is `getTranslation` that must return an `Observable`. If your loader is synchronous, just use `Observable.of` to create an observable from your static value.\n\n##### Example\n```ts\nclass CustomLoader implements IntlLoader {\n    getTranslation(lang: string): Observable\u003cany\u003e {\n        return Observable.of({\"KEY\": \"Value\"});\n    }\n}\n```\n\nOnce you've defined your loader, you can provide it in your NgModule by adding it to its `providers` property.\nDon't forget that you have to import `IntlModule` as well:\n```ts\n@NgModule({\n    imports: [\n        BrowserModule,\n        IntlModule.forRoot({ provide: IntlLoader, useClass: CustomLoader })\n    ],\n    exports: [IntlModule],\n})\nexport class SharedModule {\n}\n```\n\n#### How to handle missing translations\nYou can setup a provider for `MissingTranslationHandler` in the bootstrap of your application (recommended), or in the `providers` property of a component.\nIt will be called when the requested translation is not available.\nThe only required method is `handle` where you can do whatever you want. If this method returns a value or an observable (that should return a string), then this will be used.\nJust don't forget that it will be called synchronously from the `instant` method.\n\n##### Example:\nCreate a Missing Translation Handler\n```ts\nimport {MissingTranslationHandler, MissingTranslationHandlerParams} from 'ng2-intl';\n\nexport class MyMissingTranslationHandler implements MissingTranslationHandler {\n  handle(params: MissingTranslationHandlerParams) {\n      return 'some value';\n  }\n}\n```\n\nSetup the Missing Translation Handler in your NgModule (recommended) by adding it to its `providers` property:\n```ts\n{ provide: MissingTranslationHandler, useClass: MyMissingTranslationHandler }\n```\n\n\n[npm]: https://www.npmjs.org/package/ng2-intl\n[npm-badge]: https://img.shields.io/npm/v/ng2-intl.svg?style=flat-square\n[david]: https://david-dm.org/eyolas/ng2-intl\n[david-badge]: https://img.shields.io/david/eyolas/ng2-intl.svg?style=flat-square\n[travis]: https://travis-ci.org/eyolas/ng2-intl\n[travis-badge]: https://img.shields.io/travis/eyolas/ng2-intl/master.svg?style=flat-square\n[Angular2]: https://angular.io/\n[ng2-translate]: https://github.com/ocombe/ng2-translate\n[react-intl]: https://github.com/yahoo/react-intl\n[FormatJS]: http://formatjs.io/\n[FormatJS GitHub]: http://formatjs.io/github/\n[Documentation]: https://github.com/eyolas/ng2-intl/wiki\n[Getting Started]: https://github.com/eyolas/ng2-intl/wiki#getting-started\n[Examples]: https://github.com/eyolas/ng2-intl/tree/master/examples\n[CONTRIBUTING]: https://github.com/eyolas/ng2-intl/blob/master/CONTRIBUTING.md\n[LICENSE file]: https://github.com/eyolas/ng2-intl/blob/master/LICENSE.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feyolas%2Fng2-intl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feyolas%2Fng2-intl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feyolas%2Fng2-intl/lists"}