Angular Material Input Currency Mask Example - A User-Friendly Guide

• 09 September 2023, 22:40
• Angular

Introduction:

Angular Material is a versatile library that streamlines the development of visually appealing and user-friendly web applications. One common challenge in web forms is formatting input fields for currency values. In this blog post, we'll explore how to implement a currency input mask in Angular Material. This will not only provide your users with an intuitive experience but also improve the accessibility and professionalism of your web application.
 

Table of Contents:

1. Prerequisites
2. Installing Dependencies
3. Implementing the Currency Input Mask
4. Customizing Currency Formatting
5. Enhancing User Experience
6. Conclusion

1. Prerequisites

Before we embark on this journey, make sure you have Angular and Angular Material installed in your project. If you're starting from scratch, you can quickly create a new Angular project using the Angular CLI:

ng new currency-mask-example
cd currency-mask-example
ng add @angular/material

2. Installing Dependencies

To implement the currency input mask, we'll use the ngx-currency library. Begin by installing it via npm:

npm install ngx-currency --save

3. Implementing the Currency Input Mask

3.1 Import the Currency Mask Module:

In your Angular module (usually found in app.module.ts), import and add the NgxCurrencyModule to the imports array:
 

import { NgxCurrencyModule } from 'ngx-currency';

@NgModule({
  declarations: [/* ... */],
  imports: [
    /* ... */
    NgxCurrencyModule,
  ],
})
export class AppModule {}

3.2 Create a Currency Input Field:

In your component template (e.g., app.component.html), utilize Angular Material's <mat-form-field> along with the <ngx-currency> directive to create a currency input field:

<mat-form-field>
  <input matInput
         [(ngModel)]="amount"
         ngxCurrency
         [options]="{ prefix: '$ ', thousands: ',', precision: 2 }"
         (ngModelChange)="formatCurrency($event)">
</mat-form-field>

Here, the ngx-currency directive takes care of formatting the input as currency. You can customize the currency format using the options property.

3.3 Format the Currency in the Component:

Inside your component file (e.g., app.component.ts), create a function to format the currency value based on user input:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  amount: number = 0;

  formatCurrency(value: string): void {
    // Remove non-numeric characters and parse to a number
    this.amount = parseFloat(value.replace(/[^0-9.]/g, ''));
  }
}

The formatCurrency function simplifies user input by removing non-numeric characters and converting the value into a numeric representation.

4. Customizing Currency Formatting

You have the flexibility to customize the currency formatting options to suit your specific requirements. Adjust the options property in the template to change the currency symbol, thousands separator, and decimal precision.

5. Enhancing User Experience

Implementing a currency input mask not only improves the accuracy of user inputs but also makes your web application more user-friendly. Users can input currency values effortlessly, resulting in a more professional and polished user experience.

6. Conclusion

By following the steps outlined in this blog post, you can seamlessly implement a currency input mask in Angular Material. This valuable addition enhances both user experience and the overall accessibility of your web application. Feel free to customize the currency formatting options to match your specific needs, and watch your web forms become more user-friendly and professional than ever before. Happy coding!

Tagged in : angular Material Input Currency