{"id":26153452,"url":"https://github.com/dsi-hug/ngx-g11n","last_synced_at":"2025-04-14T06:37:13.980Z","repository":{"id":276843223,"uuid":"924856005","full_name":"DSI-HUG/ngx-g11n","owner":"DSI-HUG","description":"🌐 Angular helpers for internationalizing and localizing your application","archived":false,"fork":false,"pushed_at":"2025-04-03T16:14:26.000Z","size":987,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-12T05:09:45.109Z","etag":null,"topics":["angular","angular-helpers","angular-localization","angular-tools","g11n","i18n","internationalization","l10n","language","locale","localization","multilingual","ngx-g11n","translate","translation"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DSI-HUG.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-30T19:13:00.000Z","updated_at":"2025-04-03T16:14:24.000Z","dependencies_parsed_at":"2025-02-15T01:45:25.009Z","dependency_job_id":null,"html_url":"https://github.com/DSI-HUG/ngx-g11n","commit_stats":null,"previous_names":["dsi-hug/ngx-g11n"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DSI-HUG%2Fngx-g11n","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DSI-HUG%2Fngx-g11n/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DSI-HUG%2Fngx-g11n/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DSI-HUG%2Fngx-g11n/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DSI-HUG","download_url":"https://codeload.github.com/DSI-HUG/ngx-g11n/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248836291,"owners_count":21169370,"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":["angular","angular-helpers","angular-localization","angular-tools","g11n","i18n","internationalization","l10n","language","locale","localization","multilingual","ngx-g11n","translate","translation"],"created_at":"2025-03-11T07:57:44.832Z","updated_at":"2025-04-14T06:37:13.955Z","avatar_url":"https://github.com/DSI-HUG.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n    @hug/ngx-g11n\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cbr/\u003e\n    \u003ca href=\"https://www.hug.ch\"\u003e\n        \u003cimg src=\"https://cdn.hug.ch/svgs/hug/hug-logo-horizontal.svg\" alt=\"hug-logo\" height=\"54px\" /\u003e\n    \u003c/a\u003e\n    \u003cbr/\u003e\u003cbr/\u003e\n    \u003ci\u003eAngular helpers for internationalizing and localizing your application\u003c/i\u003e\n    \u003cbr/\u003e\u003cbr/\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@hug/ngx-g11n\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/v/@hug/ngx-g11n.svg?color=blue\u0026logo=npm\" alt=\"npm version\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://npmcharts.com/compare/@hug/ngx-g11n?minimal=true\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/dw/@hug/ngx-g11n.svg?color=blue\u0026logo=npm\" alt=\"npm donwloads\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/dsi-hug/ngx-g11n/blob/main/LICENSE\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/license-GPLv3-ff69b4.svg\" alt=\"license GPLv3\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/dsi-hug/ngx-g11n/actions/workflows/ci_tests.yml\"\u003e\n        \u003cimg src=\"https://github.com/dsi-hug/ngx-g11n/actions/workflows/ci_tests.yml/badge.svg\" alt=\"build status\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/dsi-hug/ngx-g11n/blob/main/CONTRIBUTING.md#-submitting-a-pull-request-pr\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs welcome\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n## Getting started\n\nTo set up or update an Angular project with this library use the Angular CLI's [schematic][schematics] commands:\n\n#### Installation\n\n```sh\nng add @hug/ngx-g11n\n```\n\n\u003cdetails\u003e\n    \u003csummary\u003e\u003ci\u003eMore details\u003c/i\u003e\u003c/summary\u003e\n\n\u003e \u003cbr/\u003e\n\u003e\n\u003e The `ng add` command will ask you the following questions:\n\u003e\n\u003e 1.  **? Default language**: *the default language used by your application*\n\u003e 2.  **? Default currency**: *the default currency used by your application*\n\u003e 3.  **? Use navigator language**: *whether to use the navigator language*\n\u003e 4.  **? Use Angular locale extra**: *whether to also register Angular locale extra*\n\u003e 5.  **? Translations path**: *the path to your translation files*\n\u003e 6.  **? Query param name**: *the name of the query parameter used to define the language*\n\u003e 7.  **? Auto-inject locale in request headers**: *whether to inject the language in every requests header*\n\u003e 8.  **? Add support for Angular Material**: *whether to also configure things for Angular Material*\n\u003e 9.  **? Add locales [fr-CH, de-CH] by defaults**: *whether to add fr-CH and de-CH by default*\n\u003e\n\u003e And based on your answers, it will also potentialy perform the following actions:\n\u003e\n\u003e -   Run `ng add @angular/localize` schematic\n\u003e -   Install `@angular/material-date-fns-adapter` as a dev dependency\n\u003e -   Deploy default language files in either `/public` or `/src/assets` folder\n\u003e -   Add `skipLibCheck` in `angularCompilerOptions` of your `tsconfig.json` file (for ng14 apps)\n\u003e -   Add or modify the required configurations in your `angular.json` file:\n\u003e     ```json\n\u003e     \"projects\": {\n\u003e       \"my-app\": {\n\u003e         \"i18n\" {\n\u003e           \"sourceLocale\": \"fr-CH\"\n\u003e         },\n\u003e         \"architect\": {\n\u003e           \"build\": {\n\u003e             \"options\": {\n\u003e               \"i18nMissingTranslation\": \"error\"\n\u003e             }\n\u003e           },\n\u003e           \"extract-i18n\": {\n\u003e             \"builder\": \"@angular-devkit/build-angular:extract-i18n\",\n\u003e             \"options\": {\n\u003e               \"outputPath\": \"projects/demo-app/public/i18n\",\n\u003e               \"outFile\": \"fr-CH.json\",\n\u003e               \"format\": \"json\"\n\u003e             }\n\u003e           }\n\u003e         }\n\u003e       }\n\u003e     }\n\u003e     ```\n\u003e -   Provide and configure the library\n\n\u003c/details\u003e\n\n#### Update\n\n```sh\nng update @hug/ngx-g11n\n```\n\n\n## Usage\n\nThis library uses the official [@angular/localize][angular-localize-url] package under the hood, so manage your translations just as you would with it.\n\nThen use the command `ng extract-i18n` to extract the marked messages from your components into a single source language file.\n\n#### Examples\n\n```html\n\u003c!-- Template content --\u003e\n\u003cspan i18n=\"@@demoText\"\u003eMessage to translate\u003c/span\u003e\n```\n\n```html\n\u003c!-- Template attribute --\u003e\n\u003cspan subtitle=\"Message to translate\" i18n-subtitle=\"@@demoText\"\u003e...\u003c/span\u003e\n```\n\n```html\n\u003c!-- Template ICU --\u003e\n\u003cspan i18n=\"@@demoPluralText\"\u003e{items.length, plural, =0 {No item} =1 {1 item} other {{{items.length}} items}}\u003c/span\u003e\n```\n\n```ts\n// Script\nconst msgToTranslate = $localize`:@@demoText:Message to translate`;\n```\n\n\n## Helpers\n\nThe following helpers are available.\n\n#### # currentLanguage\n\nGet the current language of the application.\n\n```ts\n// import { currentLanguage } from '@hug/ngx-g11n/legacy'; /* for ng14 apps */\nimport { currentLanguage } from '@hug/ngx-g11n';\n\nconsole.log(currentLanguage());\n```\n\n#### # setLanguage\n\nSet a language and reload the application.\n\n```ts\n// import { setLanguage } from '@hug/ngx-g11n/legacy'; /* for ng14 apps */\nimport { setLanguage } from '@hug/ngx-g11n';\n\nsetLanguage('en-US');\n```\n\n\n## Options\n\nThe behavior of the library can be configured either in:\n\n* `app.config.ts` *(if the app is a standalone Angular application)*\n\n```ts\n// import { provideG11n } from '@hug/ngx-g11n/legacy'; /* for ng14 apps */\nimport { provideG11n } from '@hug/ngx-g11n';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideG11n(...features)\n  ]\n};\n```\n\n* `app.module.ts` *(if the app is **not** a standalone Angular application)*\n\n```ts\n// import { G11nModule } from '@hug/ngx-g11n/legacy'; /* for ng14 apps */\nimport { G11nModule } from '@hug/ngx-g11n';\n\n@NgModule({\n  imports: [\n    G11nModule.forRoot(...features)\n  ]\n})\nexport class AppModule { }\n```\n\nThe following features are available:\n\n#### # withDefaultLocales\n\nThis feature will configure the library with `fr-CH` and `de-CH` as the default locales.\n\nIf you are not using [Angular Material][angular-material-url] or prefer to use any other locale, please refer to the `withLocales` feature.\n\n```ts\nimport { withDefaultLocales } from '@hug/ngx-g11n/locales';\n\nprovideG11n(withDefaultLocales())\n```\n\n#### # withLocales\n\nThis feature will configure the library with the given locales.\n\nThe `extra` and `datefns` are optionals and based on your personal requirements.\n\n```ts\n// import { withLocales } from '@hug/ngx-g11n/legacy'; /* for ng14 apps */\nimport { withLocales } from '@hug/ngx-g11n';\n\nprovideG11n(withLocales({\n  'fr-CH': {\n    base: () =\u003e import('@angular/common/locales/fr-CH'),\n    extra: () =\u003e import('@angular/common/locales/extra/fr-CH'),\n    datefns: () =\u003e import('date-fns/locale/fr-CH')\n  }\n}))\n```\n\n#### # withDateFnsMaterial\n\nThis feature will configure the library with everything that's required for [Angular Material][angular-material-url].\n\nAs the name suggests, it will also use the [datefns][datefns-url] adapter.\n\n```ts\nimport { withDateFnsMaterial } from '@hug/ngx-g11n/material';\n\nprovideG11n(withDateFnsMaterial())\n```\n\n#### # withInterceptor\n\nThis feature will configure the library with an http interceptor.\n\n`Accept-Language: xyz` will be added to the header of every http requests.\n\n```ts\n// import { withInterceptor } from '@hug/ngx-g11n/legacy'; /* for ng14 apps */\nimport { withInterceptor } from '@hug/ngx-g11n';\n\nprovideG11n(withInterceptor())\n```\n\n#### # withOptions\n\nThis feature will override the defaults library options.\n\n```ts\n// import { withOptions } from '@hug/ngx-g11n/legacy'; /* for ng14 apps */\nimport { withOptions } from '@hug/ngx-g11n';\n\ninterface G11nOptions {\n    /** @default 'fr-CH' */\n    defaultLanguage?: string;\n    /** @default 'CHF' */\n    defaultCurrency?: string;\n    /** @default true */\n    useNavigatorLanguage?: boolean;\n    /** @default false */\n    loadLocaleExtra?: boolean;\n    /** @default true */\n    useTranslations?: boolean;\n    /** @default '/translations' */\n    translationsPath?: string;\n    /** @default 'lang' */\n    queryParamName?: string;\n    /** @default localStorage */\n    storage?: Storage;\n    /** @default NO_DEBUG */\n    debug?: G11nDebug;\n}\n\nprovideG11n(withOptions(options))\n```\n\n\n## Debug\n\nThe following modes are available:\n\n#### # SHOW_KEYS\n\nWill display each translation key next to its translation *(ex: \"message (@key)\")*.\n\nUseful when you need to quickly and easily retrieve the associated key of a message.\n\n\u003e Use `withOptions({ debug: G11nDebug.SHOW_KEYS }))` or the query parameter *(ex: `?lang=keys`)*.\n\n#### # DUMMY_TRANSLATIONS\n\nWill replace every translation with a dash (`-`).\n\nUseful when you need to see what messages are left untranslated.\n\n\u003e Use `withOptions({ debug: G11nDebug.DUMMY_TRANSLATIONS }))` or the query parameter *(ex: `?lang=dummy`)*.\n\n#### # NO_DEBUG\n\nDisable any debug mode.\n\n\u003e Use `withOptions({ debug: G11nDebug.NO_DEBUG })`.\n\n\n## Development\n\nSee the [developer docs][developer].\n\n\n## Contributing\n\n#### \u003e Want to Help?\n\nWant to file a bug, contribute some code or improve documentation? Excellent!\n\nBut please read up first on the guidelines for [contributing][contributing], and learn about submission process, coding rules and more.\n\n#### \u003e Code of Conduct\n\nPlease read and follow the [Code of Conduct][codeofconduct], and help us keep this project open and inclusive.\n\n\n## Credits\n\nCopyright (C) 2025 [HUG - Hôpitaux Universitaires Genève][dsi-hug]\n\n[![love@hug](https://img.shields.io/badge/@hug-%E2%9D%A4%EF%B8%8Flove-magenta)][dsi-hug]\n\n\n\n\n[schematics]: https://angular.io/guide/schematics-for-libraries\n[angular-localize-url]: https://angular.dev/guide/i18n#learn-about-angular-internationalization\n[angular-material-url]: https://material.angular.io\n[datefns-url]: https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings\n[developer]: https://github.com/dsi-hug/ngx-g11n/blob/main/DEVELOPER.md\n[contributing]: https://github.com/dsi-hug/ngx-g11n/blob/main/CONTRIBUTING.md\n[codeofconduct]: https://github.com/dsi-hug/ngx-g11n/blob/main/CODE_OF_CONDUCT.md\n[dsi-hug]: https://github.com/dsi-hug\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsi-hug%2Fngx-g11n","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdsi-hug%2Fngx-g11n","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsi-hug%2Fngx-g11n/lists"}