How to convert numbers to words in Angular|Typescript example

convert number to words in Angular

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.

  1. Using the number-to-words npm package
  2. 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
<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 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 {
    this.outputWords= converter.toWords(this.mynumber);


And input is 10000000 and output is ten million, And input is 409 and 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

Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.