How to display percentage symbol for input value in Angular Numeric Textbox?

This section explains you about, how to display percentage symbol for the entered input value in the percentage textbox

Angular Numeric Textbox

The following section explains the steps required to create a simple Angular NumericTextBox component.

Pre-requisites

Make sure that you have the compatible versions of Angular in your machine before starting to work on this project.

• Node.js (latest version)

• Angular

• Angular CLI

• TypeScript 2.6+

• Visual studio code for the editor

Introduction

The Angular NumericTextBox used in this project is created from the Syncfusion ej2-angular-inputs package. You can simply define it as <ejs-numerictextbox> within the template.

Dependencies

Before starting this project, the Angular NumericTextBox requires to add the Syncfusion ej2-angular- inputs package from the npmjs, which is distributed in the npm as @syncfusion scoped packages.

Creating an Angular Project

To create the Angular project using the Angular CLI tool, follow the steps given below.

Install Angular CLI using the following command.

npm install -g @angular/cli

Now, create a new Angular project by using the command ng new and navigate to that folder.

ng new <project name>
cd <project name>

Install the ej2-angular-inputs package through the npm install command.

npm install @syncfusion/ej2-angular-inputs --save

Registering Angular NumericTextBox

You can add the Angular NumericTextBox component by using the ejs-numerictextbox directive and the attributes within the tag that allows you to define other functionalities.

Import the NumericTextBox module into the Angular application (app.module.ts) from the ej2-angular-inputs package.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// imports the NumericTextBoxModule for the NumericTextBox component
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { AppComponent }  from './app.component';
 
@NgModule({
  // declaration of ej2-angular-inputs module into NgModule
  imports:      [ BrowserModule , NumericTextBoxModule],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Adding CSS Reference

This can be referred in [src/styles.css] using the following code.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';

Display percentage symbol for the entered input value

The default format property of EJ2 Numeric Textbox is "p2," based on which the value given will be multiplied with 100 and set to show the result as a percentage value in the numeric textbox. Microsoft's default numeric format behavior is 80% with its 0.8 underlying value.

For standard numeric format refer the link given below:

Microsoft Link: https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings

To display the entered value as output with a percentage symbol, you can use the custom numeric format as mentioned below. Refer the following code for custom formatting.

[app.component.html]

<ejs-numerictextbox value="50" [format]="format"></ejs-numerictextbox>

[app.component.ts]

export class AppComponent { 
    public format = "### \'%\'"
    constructor() { }
}

Screenshot

Please find the sample below for reference:

https://stackblitz.com/edit/angular-xznfsx-kn9xaa?file=app.component.html

For more information about the NumericTextBox component, refer to this UG Documentation, API Reference, and Samples.

I hope you enjoyed about how to display percentage symbol for the entered input value in percentage textbox.

You can refer to our Angular Numeric Textbox feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Numeric Textbox example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!