{

How to convert number 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 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.

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 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, the ng command should work and output 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 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 to strings and output 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 converter from number-to-words as described below use 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 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.

Conclusion

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

THE BEST NEWSLETTER ANYWHERE
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
Subscribe
You'll get a notification every time a post gets published here.