NumericTextBox Localization for currency (Kendo UI for Angular)

10 posts, 1 answers
  1. James
    James avatar
    8 posts
    Member since:
    May 2017

    Posted 11 Jul Link to this post

    I am trying to apply localization for currency using the NumericTextBox, but I am not observing any changes when I apply a locale.  

    I can't piece together how to apply localization for a specific country/locale (e.g.,Germany; "de") on load.  

    Is the application of the localization set as an attribute within the <kendo-numerictextbox> tag, or should I be applying the localization within a method.

     

    Here is what I have so far:

    @Component({
        selector: 'my-app',
        template: `
            <kendo-numerictextbox format="c3" locale="de" [(ngModel)]="numericValue" [min]="-10" [max]="100" [autoCorrect]="false">
                <kendo-numerictextbox-messages
                    increment="Custom increment"
                    decrement="Custom decrement"
                ></kendo-numerictextbox-messages>
            </kendo-numerictextbox>
            <hr/>
            
            <div>Underlying Value:<input type="number" [(ngModel)]="numericValue"></div>
        `
    })

    export class AppComponent {
      public numericValue: number = 987654.321;
    }

     

    I would expect the value to be displayed as "987.654,321 €".

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    628 posts

    Posted 13 Jul Link to this post

    Hi James,

    When the "format" input of the NumericTextBox is set to display numbers as currency units, the default unit for the culture, as set locally, will be used. If you would like to target a specific locale, different than the browser's default one, you can use the approach, described and demonstrated in the following documentation articles:

    http://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/globalization/#toc-globalization

    http://www.telerik.com/kendo-angular-ui/components/internationalization/

    http://www.telerik.com/kendo-angular-ui/components/internationalization/loading-data/

    I have prepared a simple example, based on the provided NumericTextBox markup, and loading the DE locale info in the app.module.ts file:

    http://plnkr.co/edit/eQEifRNzOlXSySOF5LBR?p=preview

    I hope this helps.

    Regards,
    Dimiter Topalov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. James
    James avatar
    8 posts
    Member since:
    May 2017

    Posted 17 Jul in reply to Dimiter Topalov Link to this post

    When I attempt to access the Plunk that you supplied (http://plnkr.co/edit/eQEifRNzOlXSySOF5LBR?p=preview) within Chrome, it just gets stuck at "Loading..."
  4. James
    James avatar
    8 posts
    Member since:
    May 2017

    Posted 17 Jul in reply to James Link to this post

    It appears that    

    "tslib": "https://unpkg.com/tslib@1.7.1",

     

    was missing from the systemjs.config.js.  Once added, then the example functioned.

     

     

  5. James
    James avatar
    8 posts
    Member since:
    May 2017

    Posted 17 Jul in reply to Dimiter Topalov Link to this post

    It appears that 

        "tslib": "https://unpkg.com/tslib@1.7.1",

     

    was missing from systemjs.config.js.  After adding it, then the example worked as described.

  6. James
    James avatar
    8 posts
    Member since:
    May 2017

    Posted 17 Jul in reply to Dimiter Topalov Link to this post

    It appears that

        "tslib": "https://unpkg.com/tslib@1.7.1",

    was missing from systemjs.config.js.  Once I added it, then the example worked as described.

  7. James
    James avatar
    8 posts
    Member since:
    May 2017

    Posted 17 Jul in reply to Dimiter Topalov Link to this post

    It appears that  "tslib: https://unpkg.com/tslib@1.7.1,"

    was missing from systemjs.config.js.  Once I added it, then the example worked as described.

  8. James
    James avatar
    8 posts
    Member since:
    May 2017

    Posted 17 Jul in reply to Dimiter Topalov Link to this post

    It appears that the tslib entry was missing from systemjs.config.js.  Once I added it, then the example worked as described.
  9. James
    James avatar
    8 posts
    Member since:
    May 2017

    Posted 17 Jul in reply to Dimiter Topalov Link to this post

    Is there a way to support  ISO 4217 values rather than a currency symbol?

    (Apologies for all the other posts, but your web site was indicating an error when I posted.  I was unaware that they were all, actually, successful posts)

  10. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    628 posts

    Posted 19 Jul Link to this post

    Hi James,

    I am sorry about the Plunker issue. It was caused by SystemJS specific requirements for including tslib like you have done. The issue was addressed on our end such that all new Plunkers, opened from our online examples will work as expected, but older plunkers, created before this change will need adding this line of code in the SystemJS config file in the "map" object:

    "tslib: https://unpkg.com/tslib@1.7.1,"

    To display the currency code instead of its symbol (e.g. USD instead of $), you can bind the format input to a NumberFormatOptions object and specify currencyDisplay as "code":

    http://plnkr.co/edit/OT5ALEPE2sjmpSv4OnaQ?p=preview

    Let me know whether this is the desired functionality.

    Regards,
    Dimiter Topalov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top