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.
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
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>
<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";
@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
