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


  • 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

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: 11.0.5
Node: 10.16.3
OS: win32 x64

Angular: 11.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
@angular-devkit/architect       0.1100.5
@angular-devkit/build-angular   0.1100.5
@angular-devkit/core            11.0.5
@angular-devkit/schematics      11.0.5
@schematics/angular             11.0.5
@schematics/update              0.1100.5
rxjs                            6.6.3
typescript                      4.0.5

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.

  "@types/number-to-words": "^1.2.0",
  "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 and convert it to strings, and output it to the page
<br />
<h1>Angular Convert Number to word example</h1>
<br />
  <input type="number" id="mynumber" name="mynumber" [(ngModel)]="mynumber" />

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

In the component, app.component.ts

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

import { Component } from "@angular/core";
import * as converter from "number-to-words";
  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.


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