angular-ecmascript-intl - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

 {
   "name": "angular-ecmascript-intl",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "peerDependencies": {
@@ -38,2 +38,2 @@ "@angular/common": "^15.1.0",
   }
-}
+}

README.md

@@ -1,29 +0,87 @@
-# AngularEcmascriptIntl
+# Angular ECMAScript Intl
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.1.0.
+Contains pipes to transform internationalization data using `Intl.*` browser APIs.
 
-## Code scaffolding
+## Getting started
 
-Run `ng generate component component-name --project angular-ecmascript-intl` to generate a new component. You can also
-use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angular-ecmascript-intl`.
-> Note: Don't forget to add `--project angular-ecmascript-intl` or else it will be added to the default project in
-> your `angular.json` file.
+Install the package:
 
-## Build
+```
+npm install angular-ecmascript-intl --save
+```
 
-Run `ng build angular-ecmascript-intl` to build the project. The build artifacts will be stored in the `dist/`
-directory.
+Import the `IntlModule`:
 
-## Publishing
+```typescript
+import { NgModule } from '@angular/core';
+import { IntlModule } from 'angular-ecmascript-intl';
 
-After building your library with `ng build angular-ecmascript-intl`, go to the dist
-folder `cd dist/angular-ecmascript-intl` and run `npm publish`.
+@NgModule({
+  imports: [
+    IntlModule,
+  ],
+})
+export class MyModule {
+}
+```
 
-## Running unit tests
+By default, the pipe will use the browser default locale. If you want to override it, you can provide the `INTL_LOCALES`
+injection token:
 
-Run `ng test angular-ecmascript-intl` to execute the unit tests via [Karma](https://karma-runner.github.io).
+```
+import { NgModule } from '@angular/core';
+import { INTL_LOCALES } from 'angular-ecmascript-intl';
 
-## Further help
+@NgModule({
+  providers: [
+    {
+      provide: INTL_LOCALES,
+      useValue: 'de-DE',
+    },
+  ],
+})
+export class MyModule {
+}
+```
 
-To get more help on the Angular CLI use `ng help` or go check out
-the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+Now you can use the pipes, see below.
+
+## Pipes
+
+### Date Pipe
+
+Use the date pipe like the following:
+
+```
+{{myDate | intlDate: options}}
+```
+
+The input date can be one of the following:
+
+* `Date` object
+* number (UNIX timestamp)
+* string (will be parsed by `new Date()` constructor)
+* null
+* undefined
+
+The options are the same as the options for `new Intl.DateTimeFormat()`. For a list of the options, see
+their [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat).
+
+With the `INTL_DATE_PIPE_DEFAULT_OPTIONS` injection token you can specify default options.
+
+## Background
+
+Working with Angular's built-in pipes which support internationalization works fine when only supporting one locale.
+But nowadays, you want to support many locales, to give every user a good user experience. To get this working with
+Angular's built-in pipes can be time-consuming, because data for every locale must be included
+to the application. This increases bundle size and load times.
+
+Modern browsers are fully capable of handling internationalization with the `Intl.*` browser APIs. There is no need for
+loading any locale date. This package re-implements some Angular built-in pipes such as `date` using these APIs.
+
+## Roadmap
+
+* Language pipe
+* Country pipe
+* Number pipe(s)
+* Relative time

No alert changes

Improved metrics

Total package byte prevSize

31706

3.37%

Number of lines in readme file

88

193.33%

No dependency changes