• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » Tutorial Create Angular 4 Currency Format Directive For Textbox

Tutorial Create Angular 4 Currency Format Directive For Textbox

By Sigit Prasetya Nugroho ∙ October 4, 2017 ∙ Javascript ∙ 9 Comments

Share : TwitterFacebookTelegramWhatsapp

Angular 4 tutorial how to create currency directive. Lately, I am studying about angular 4 because there is an ERP project in the company where I work. Creating a currency formatter on the angular is different from the JQuery I’ve discussed in the How to Create Jquery Plugin for Input Currency article. But if you’re used to Angular 4, making currency directive is pretty easy, and the use is more efficient than jquery. Consider the following tutorial.

This simple directive is used to identify input field with the custom currency format. To create a currency format in the input field requires directive and pipe on angular 4. This article will create a custom currency like the following gif image

Angular 4 Currency Format Directive

Before starting the main topic, I will discuss a bit about what is directive and why we need a pipe?

Table of Contents

    • 0.1 # Directive
    • 0.2 # Pipe
  • 1 Tutorial Angular 4 Format Currency In Inputs Value In Angular 4
    • 1.1 # Custom Pipe
    • 1.2 # Custom Directive
    • 1.3 Thus my article about create angular directive to format currency, hope useful.

# Directive

An angular directive is a function executed by Angular when Angular finds Directive in DOM (Document Object Model), the function can almost do everything like hiding element before the page loaded, repeat, execute an expression, etc.

Related Articles :

  • Trick To Redirect New Window Or Tab With Post Method On Angular 5
  • Tutorial To Change Date Format Ng-bootstrap Datepicker Angular 5
  • Tutorial Simple CRUD Angular 5 And Lumen 5.6 For Beginners

There are two types of directive: built-in directive and custom directive. To create this angular directive in the text field, we need a custom directive.

# Pipe

The pipes are similar to Filters in AngularJs (Angular 1). The pipe is used to format output on HTML templates. Angular 4 also provides built-in pipe such as uppercase, lowercase, currency, Datepipe. In this tutorial, we will create a custom pipe so that the currency format can run well.

Features angular currency input that we will build

  • Only number in input typetext
  • When element does not get focus/blur, display value in input box will become format currency
  • When the element gets the focus, the formatted currency in the text field will disappear
  • When the element gets the focus, all the values in the text box will be selected

Angular 4 Currency Format Directive Min

Tutorial Angular 4 Format Currency In Inputs Value In Angular 4

Note: In the following example I will create a simple directive for Indonesian format currency (Rupiah)

Make a custom directive and a custom pipe

# Custom Pipe

Create a new pipe using an angular-cli with the following command

1
ng g pipe pipe/mycurrency

Edit mycurrency.pipe.ts and copy the following code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import { Pipe, PipeTransform } from '@angular/core';
const padding = "000000";
 
@Pipe({
  name: 'mycurrency'
})
export class MycurrencyPipe implements PipeTransform {
  private prefix: string;
  private decimal_separator:string;
  private thousands_separator:string;
  private suffix:string;
 
  constructor(){
    this.prefix='Rp.';
    this.suffix='';
    this.decimal_separator='.';
    this.thousands_separator = ',';
  }
  transform(value: string, fractionSize:number = 0 ): string {
    
    if(parseFloat(value) % 1 != 0)
    {
      fractionSize = 2;
    }
    let [ integer, fraction = ""] = (parseFloat(value).toString() || "").toString().split(".");
 
    fraction = fractionSize > 0
      ? this.decimal_separator + (fraction+padding).substring(0, fractionSize) : "";
    integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, this.thousands_separator);
    if(isNaN(parseFloat(integer)))
    {
          integer = "0";
    }
      return this.prefix + integer + fraction + this.suffix;
    
  }
 
  parse(value: string, fractionSize: number = 2): string {
    let [ integer, fraction = "" ] = (value || "").replace(this.prefix, "")
                                                  .replace(this.suffix, "")
                                                  .split(this.decimal_separator);
 
    integer = integer.replace(new RegExp(this.thousands_separator, "g"), "");
 
    fraction = parseInt(fraction, 10) > 0 && fractionSize > 0
      ? this.decimal_separator + (fraction + padding).substring(0, fractionSize)
      : "";
 
    return integer + fraction;
  }
 
}

# Custom Directive

Create a new directive using an angular cli with the following command

1
ng g directive directive/mycurrency

Edit mycurrency.directive.ts and copy the following code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import { Directive, HostListener, ElementRef, OnInit } from '@angular/core';
import {MycurrencyPipe} from '../pipe/mycurrency.pipe';
@Directive({
  selector: '[appMycurrency]'
})
export class MycurrencyDirective implements OnInit{
  private el: any;
 
  constructor(
    private elementRef:ElementRef,
    private formatcurrencypipe:MycurrencyPipe
  ) {
    this.el = this.elementRef.nativeElement;
  }
  ngOnInit(){
    this.el.value = this.formatcurrencypipe.transform(this.el.value);
  }
  @HostListener("focus",["$event.target.value","$event"])
  onFocus(value,event) {
    this.el.value = this.formatcurrencypipe.parse(value); // opossite of transform
    if(event.which== 9)
    {
        return false;
    }
    this.el.select();
    
  }
 
  @HostListener("blur", ["$event.target.value"])
  onBlur(value) {
    this.el.value = this.formatcurrencypipe.transform(value);
  }
  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+C
        (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+V
        (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+X
        (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
          // let it happen, don't do anything
          return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        
      }
  }
 
}

To use it on the component, please import the pipe first on your component.ts file as shown below

Then open component.html, add appmycurrency as an attribute on the textbox element you want to provide the currency filter

For live demo app

To change the Indonesian format to $ or your country currency change from the mycurrency.pipe.ts in the constructor class

1
2
3
4
5
6
constructor(){
    this.prefix='$'; // change this line with your country
    this.suffix='';
    this.decimal_separator='.';
    this.thousands_separator = ',';
  }

Read another article: How to Create Autofocus Directive Certain Elements Angular 4

Thus my article about create angular directive to format currency, hope useful.

Another Javascript Related Post :

  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS
  • How To Implement Login Page And Protected Route ReactJS
  • Complete Tutorial React Router Dom For Beginners (Easy-To-Understand)
  • The Right Way Understanding React Lifecycle For Beginners

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Comments

  1. Avatar for DanDan says

    November 2, 2017 at 2:55 pm

    Sigit, the directive doesn’t seem to work if there is a default value in the input text element. By adding [(ngModel)]=”someValue”. If someValue is set in the constructor as this.someValue = 55.8. The expected result should be Rp. 55.80. Is there a way to fix this?

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      November 6, 2017 at 2:46 am

      i will fix it ASAP

      Thanks you 🙂

      Reply
      • Avatar for Ashritha desireddyAshritha desireddy says

        November 28, 2018 at 8:14 am

        I am trying to apply my directive on two binded value using [(ngModel)] and i do not want the value to get carry forwarded to backend. Is there a way to do so while applying this custom directive?

        Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      November 8, 2017 at 8:41 am

      hello Dan, after i check, i try it using formgroup its running well.

      Reply
      • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

        November 24, 2017 at 4:05 am

        Update:
        add # decorator below in app.component.html at your input box

        1
        <input type="text" #inputbox>

        Add this code below in yout app.component.ts

        1
        2
        3
        4
        5
        6
        7
        8
        9
        ........
        export class AppComponent implements OnInit {
        @ViewChild('inputbox') focus1:ElementRef;
        constructor(
            private cpipe : MycurrencyPipe){}
        // to invoke pipe directive to your currency format textbox use the following code
        .................
        this.focus1.nativeElement.value = this.cpipe.transform(this.focus1.nativeElement.value);
        ...................

        Hope fix your problem 🙂

        Reply
  2. Avatar for RoshanRoshan says

    May 5, 2018 at 2:58 am

    Hi Sigit,

    I followed all your steps getting the below error.. can you please let me know how to fix this error?

    ERROR Error: StaticInjectorError(AppModule)[MycurrencyDirective -> MycurrencyPipe]:
    StaticInjectorError(Platform: core)[MycurrencyDirective -> MycurrencyPipe]:
    NullInjectorError: No provider for MycurrencyPipe!

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      May 5, 2018 at 4:24 am

      at your component

      @Component({
        selector: ....,
        templateUrl: ....,
        styleUrls: ....,
        providers: [MycurrencyPipe]
      })
      
      hope fix your problem
      Reply
  3. Avatar for Ans BilalAns Bilal says

    May 2, 2019 at 12:39 pm

    padding is undefined, what is padding variable for and where are defining it ,
    Thanks

    Reply
    • Avatar for Ans BilalAns Bilal says

      May 2, 2019 at 12:42 pm

      Sorry I did not check it and I found padding constant

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Ans BilalThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (7) Publisher Tips (5) react (3) Reactjs (7) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) widget (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2021 Seegatesite.com