Angular 17 Convert Number to Words Example

Hi Developer,

In this guide, we are going to learn angular 17 convert number to words. let’s discuss about convert number to words in angular 17. we will help you to give an example of how to convert number to words in angular 17. I would like to share with you angular 17 convert number to string.

In Angular 17, creating a custom pipe to convert numbers to words is straightforward. Start by defining a pipe that takes a number as input. Inside the pipe, utilize logic to convert the number into its textual representation. Break down the number into its digits and map each digit to its corresponding word. Then, concatenate these words to form the complete representation. Finally, return the resulting string. This custom pipe enhances Angular applications by enabling the conversion of numeric data into readable text effortlessly.

In this example, we will create a custom "AmountInWords" pipe in angular 17. Then we will simply pass the number as an input parameter and convert it into words. so, let's see the simple example below:

Step for Convert Number to Words in Angular 17

• Step 1: Create Angular 17 Project
• Step 2: Create Custom AmountInWords Pipe
• Step 3: Update Ts File
• Step 4: Update HTML File
• Run Angular App

Let's follow the steps:

Step 1: Create Angular 17 Project

You can easily create your angular app using the below command:

ng new my-new-app

Step 2: Create Custom AmountInWords Pipe

Here, you need to run following command to create custom "AmountInWords" pipe. so, let's run it.

ng g pipe AmountInWords

Now, you need to update following custom pipe file.

src/app/amount-in-words.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
  
@Pipe({
  name: 'AmountInWords',
  standalone: true
})
export class AmountInWordsPipe implements PipeTransform {
  
  a = ['', 'One ', 'Two ', 'Three ', 'Four ', 'Five ', 'Six ', 'Seven ', 'Eight ', 'Nine ', 'Ten ', 'Eleven ', 'Twelve ', 'Thirteen ', 'Fourteen ', 'Fifteen ', 'Sixteen ', 'Seventeen ', 'Eighteen ', 'Nineteen '];
  b = ['', '', 'Twenty', 'Thirty', 'Fourty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety'];
  
  transform(value: string): string {
    if (value.length > 9) return 'overflow';
    let n = ('000000000' + value).substr(-9).match(/^(\d{2})(\d{2})(\d{2})(\d{1})(\d{2})$/);
    if (!n) return '';
    let str = '';
    str += (Number(n[1]) != 0) ? (this.a[Number(n[1])] || (this.b[Number(n[1][0])] + ' ' + this.a[Number(n[1][1])])) + 'Crore ' : '';
    str += (Number(n[2]) != 0) ? (this.a[Number(n[2])] || (this.b[Number(n[2][0])] + ' ' + this.a[Number(n[2][1])])) + 'Lakh ' : '';
    str += (Number(n[3]) != 0) ? (this.a[Number(n[3])] || (this.b[Number(n[3][0])] + ' ' + this.a[Number(n[3][1])])) + 'Thousand ' : '';
    str += (Number(n[4]) != 0) ? (this.a[Number(n[4])] || (this.b[Number(n[4][0])] + ' ' + this.a[Number(n[4][1])])) + 'Hundred ' : '';
    str += (Number(n[5]) != 0) ? ((str != '') ? 'And ' : '') + (this.a[Number(n[5])] || (this.b[Number(n[5][0])] + ' ' + this.a[Number(n[5][1])])) : '';
    str += ' Only';
    return str.trim();
  }
  
}

Step 3: Update Ts File

here, we need to update ts file as like bellow with lat and long variable:

src/app/app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
   
import { AmountInWordsPipe } from './amount-in-words.pipe';
    
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, AmountInWordsPipe],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    
  AmountValue: string = "700000";
    
}

Step 4: Update HTML File

here, we need to update html file as like bellow code:

src/app/app.component.html

<div class="container">
    <h1>Angular 17 Convert Number to Words Example - ItSolutionStuff.com</h1>
        
    <p>{{ AmountValue }}</p>
    <p>{{ AmountValue | AmountInWords }}</p>
  
</div>

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

Preview:

now you can check it.

I hope it can help you...