Angular 18 Convert Number to Words Example

In this short tutorial, we will cover a angular 18 convert number to words. you will learn convert number to words in angular 18. I would like to share with you how to convert number to words in angular 18. This article will give you a simple example of angular 18 convert number to string.

In Angular 18, 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 18. 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 18

• Step 1: Create Angular 18 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 18 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 18 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...