How to convert numbers to words in Angular|Typescript example

How to convert numbers to words in Angular|Typescript example

This post covers converting a digit to words in Angular applications, For example, giving 123 is the input, the output is one two three.

There are multiple ways, we can convert numbers to strings.

  • Using the number-to-words npm package
  • custom solution using logic.

This blog covers the number-to-word usage of the npm package in the Angular application.

You can see my previous about Angular button click event example

Prerequisite

  • Angular CLI installation
  • Typescript
  • node and npm

Install Angular CLI version

First, please make sure that the ng version command is working by issuing the —version option in the command. if the ng command is not installed and gives the ng command not found error, please install @angular/cli.

npm install -g @angular/cli@latest

After Angular CLI is installed, the `ng command ’ should work and output the version.

It does list out the Angular CLI version.

B:\blog\jswork\angular-number-words>ng version


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 17.0.8
Node: 21.4.0 (Unsupported)
Package Manager: npm 10.2.4
OS: win32 x64

Angular: 17.0.8
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.8
@angular-devkit/build-angular   17.0.8
@angular-devkit/core            17.0.8
@angular-devkit/schematics      17.0.8
@schematics/angular             17.0.8
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Create a new Application setup

using the ng command with a new option, create a new application using the below command

ng new angular-number-words

This will create an angular-number-words application with all required files and dependencies.

Once the application is created, install number-to-words dependencies

npm install number-to-words --save-dev
npm install @types/number-to-words --save-dev

After installation, It makes two entries in package.json.

  "devDependencies": {
    "@types/number-to-words": "^1.2.3",
    "number-to-words": "^1.2.4",
}

Convert digits to strings in Angular

In the template file, app.component.html

  • Created text box with two-way binding
  • Added button with click event attached.
  • One-click happens, take a number from the text box convert it to strings, and output it to the page
<br />
<h1>Angular Convert Number to word example</h1>
<br />
<p>
  <input type="number" id="mynumber" name="mynumber" [(ngModel)]="mynumber" />
</p>
<h1>{{outputWords}}</h1>

<button type="button" (click)="convertToWord()">Convert to String</button>

In the component, app.component.ts

Please import the converter from number-to-words as described below using converter. towards(number) to convert to strings

import { Component } from "@angular/core";
import * as converter from "number-to-words";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  mynumber: number = 0;
  outputWords = "";
  convertToWord() {
    this.outputWords = converter.toWords(this.mynumber);
  }
}

And input is 10000000 and the output is ten million, And input is 409 and the output is four hundred nine

error issue could not find a declaration file for module ‘number-to-words’

For the first time, installed only the number-to-words package, and got the error TS7016: Could not find a declaration file for module 'number-to-words'.

Here is the complete error description

Error: src/app/app.component.ts:2:28 - error TS7016: Could not find a declaration file for module 'number-to-words'. 'B:/blog/jswork/angular-number-words/node_modules/number-to-words/src/index.js' implicitly has an 'any'
  Try `npm install @types/number-to-words` if it exists or add a new declaration (.d.ts) file containing `declare module 'number-to-words';`

The above issue happens when @types/number-to-words package is not installed, please install the @types/number-to-words to fix this issue.

Conclusion

In this example tutorial, Learned how to convert numbers to words in the Angular application.