How to convert number to words in Angular| Typescript number-to-words example


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

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

  1. Using number-to-words npm package
  2. custom solution using logic.

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

Prerequisite

  • Angular cli installation
  • Typescript
  • node and npm

Install Angular cli version

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

npm install -g @angular/cli

After angular cli is installed, ng command should work and outputs version.

This will 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

new Application setup

using ng command with new option, create a new application

ng new angular-number-words

This will create an angular 11 application with all required files.

Once application is created, install number-to-words depedencies

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.
  • Once click is happened, take number from text box and convert to strings and output to 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 converter from number-to-words as described below use converter.toWords(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 output is ten million, And input is 409 and output is four hundred nine

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

For first time, i installed only 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 @types/number-to-words to fix this issue.

Similar Posts