npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

locale-currency-input

v0.0.6

Published

Support locale currency format with number and symbol for input text

Downloads

25

Readme

Angular Locale Currency

This repos is creating a library for angular currency input

Directive

use in the html: localeCurrencyInput

Module

import in the module - LocaleCurrencyInputModule

The directive can be used in html input to automatically change the input to locale currency.

  • Input in any locale currency convert to number inside the component. On focus the user will see to type in number and on focus out the user will see the number in currency format with the support of internalization format and currency symbol

  • The selector name of the directive is localeCurrencyInput

  • The directive consists of two inputs:

    • currencyCode (default value = 'USD')
    • allowNegative (default value = false)
  • For more details , the project is inside projects/locale-currency-input.

Demo

  • Demo Url: https://stackblitz.com/edit/angular-6m72i8
  • The following steps is required to use this directives:
    • The module need to import

      • import { LocaleCurrencyInputModule} from 'locale-currency-input';
      • imports: [LocaleCurrencyInputModule]
    • Inside the view you need to call localeCurrencyInput and add input. Below is one of the example

      <input type="text" localeCurrencyInput [allowNegative]="false" [currencyCode]="'USD'" [value]="usAmount" (blur)="updateUSAmount($event)" />

    • Inside the component you can get the value by using event like blur or click or any other event. Below is one of the example updateUSAmount(event) { this.usAmount = event.target.value; }

    • You can also used translation services to get the locale. If localeId is passed then the currency number format show based on the locale you had registered. If localeId is not passed then by default it will take from browser language. You can also use chrome plugin to set the locale and test in different language. Here is the chrome plugin to switch the local- https://chrome.google.com/webstore/detail/locale-switcher/kngfjpghaokedippaapkfihdlmmlafcc Here is an example how we can used achieve this

    export const getNavigatorLanguage = (lang = '') =>
                      lang ? lang :
                      (navigator.languages && navigator.languages.length) ?
                        navigator.languages[0].split('-')[0] :
                        navigator.language.split('-')[0] || 'en';
    
    
    export const lang = getNavigatorLanguage();
    
    providers: [
      {
        provide: LOCALE_ID,
        useValue: lang
      },
      {
        provide: APP_INITIALIZER,
        useFactory: (translateService) => {
          return () => {
            return import(
              `@angular/common/locales/${lang}.js`
              ).then(module => {
                registerLocaleData(module.default);
                translateService.use(lang);
                translateService.setDefaultLang(lang);
              });
          };
        },
        deps: [TranslateService],
        multi: true
      }