Showing Angular 2 inputs in string format

I am currently tackling a challenge with a project that utilizes Angular 2. The client has requested that the numbers entered in the input tags be displayed as strings with commas and decimals. However, since the data is being sent to and retrieved from a database in numeric form, changing it to a string could lead to complications with backend calculations. Therefore, using angular pipes may not be a viable solution as they would convert the number to a string. Additionally, I am dealing with a large volume of data, making it impractical to individually convert each number. I am seeking a more universal solution to address this issue. Any advice on how to achieve this would be highly appreciated.

Answer №1

In order to separate a given input number into groups of three and assign the corresponding characters, you can utilize the pipe and regex.

Here is an example of using the pipe:

transform(value: number, format: string): string {
    return (+value || 0).toFixed(2)
      .replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
      .replace(/(?=((,\d{3}){2}))/, '*')
      .replace('*,', "'");
  }

For instance, if the input is 1000000:

The output will be 1'000,000.00

Check out this live demo for further understanding: Example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying a list of items in a dropdown menu that includes both the item's ID and name using angular

I am currently utilizing the angular2-multiselect-dropdown to connect with server values. interface PayerDummyObjType{ id: string; itemName: string; } PayerDummyObjType: PayerDummyObjType[]; PayerDummyObjTypeSelected: PayerDummyObjType[]; dropdownSettin ...

What benefits does WebSocketSubject offer?

New to the world of web development, so please be patient with me... Current tech stack: Angular frontend, Tornado (Python-based) web server for the backend I've been successfully utilizing RxJs and WebSocket to communicate with the backend, followi ...

Angular 6 animation moving forward (utilizing animation-fill-mode in Angular)

My CSS animated property is functioning properly with the code snippet below: animation: collapse1 0.3s forwards; However, I now need to transition to Angular animations. Everything is working correctly, except for one issue: once the animation completes ...

Adding an icon to the contents of a specific column in Angular material

Struggling to figure out how to incorporate an icon into the data in the Status column using Angular material. Here is the markup of my page: <table mat-table [dataSource]="dataSource"> <ng-container *ngFor="let ...

Preventing the (click) function from being activated during dragging in Angular 10

My div contains an openlayers map setup as shown below: <div id="map" (click)="getInfo($event)" class="map"></div> Whenever I drag my mouse to move around the map, the getInfo function is triggered. Is there a way to make it trigger only when ...

Ways to keep information hidden from users until they actively search for it

Currently, I have a custom filter search box that is functioning correctly. However, I want to modify it so that the data is hidden from the user until they perform a search. Can you provide any suggestions on how to achieve this? Below is the code I am u ...

Comparing angular2/core and @angular/core: What sets them apart?

Maybe this is a silly question, but I've noticed that there are multiple instances of import {Component} from 'angular2/core' and import {Component} from '@angular/core' However, I can't seem to grasp when to use one ove ...

An issue has occurred: The function _co.deleteConsulta is not recognized as a valid function

While following a tutorial on creating a CRUD application using Firestore, I encountered an issue when trying to delete data from Firestore. Every time I attempt to delete a user from my Firestore database, I receive an error stating that ._co.deleteConsul ...

How can you generate a "Package Contains Lower Node Version" error message during the installation of an NPM package if the node version is higher than the current system's node version?

I am looking for a way to trigger an error during the installation of an NPM package if the node version supported by that module does not match the system/server node version. Specifically, I want to prevent the installation of any npm module that suppor ...

Tips for extracting value from a dynamic element in Angular 2

Here is the HTML code: <tr *ngFor="let item of items"> <td #id>{{item.id}}</td> <td>{{item.comment}}</td> <td> <i class="fa fa-trash-o" aria-hidden="true" (click)="deleteTime(id.value)"> ...

Maximizing Azure Web App capabilities to host multiple applications

I have developed an app using ASP .NET Core MVC + Angular and now I need to deploy it for three separate customers. Each customer currently has their own database. Is it feasible to create multiple sites within a single Azure web app (such as mysite.com/ ...

Angular automatically protects routes by default

In the application I've created, there is a requirement for most routes to be protected and accessible only when logged in. Is it feasible to implement a default route guard while also specifying certain routes that should remain open? ...

Configuring lazy loaded modules with Angular 2 router

I am in the process of developing a service that utilizes router configuration to generate a map of routes based on components. Everything works smoothly except when dealing with lazy loaded module routes. I'm stuck on how to retrieve routes from a l ...

Observing the completion of a subscriber function

Is there a more streamlined way to determine if the subscriber has finished executing or return something and catch it up-stream? Consider the following code snippets: this._subscriptions.push(this._client .getCommandStream(this._command) // R ...

Using Angular with the ngrx library for handling consecutive API calls

Currently, I am in the process of integrating ngrx into my Angular 4 application. The structure of the redux-related code is inspired by the example application in the ngrx repository (https://github.com/ngrx/example-app). One thing that I am contemplating ...

Error: In Angular and Typescript, the function this.$resource is not recognized

I keep encountering a TypeError: this.$resource is not a function. Below is the code snippet causing the issue: export class DataAccessService implements IDataAccessService { static $inject = ["$resource"]; constructor(private $resource: ng ...

What strategies can I implement to reduce the size of my Angular application to 500K or less?

I have been researching ways to reduce the size of my Angular application, but have not yet found a solution that significantly decreases its size. Currently, my application is 4M in production and 14M in development. So far, I have tried: Lazily loadin ...

Efficiently organizing items within a list on Ionic

Currently, I have an ion-list structured as follows: <ion-list *ngFor = "let chat of Chats"> <ion-item (click) = "openChat(chat.id)"> <ion-label> <h2> {{chat.username}} </h2> ...

Upgrade Angular to the most recent version available

Our organization is looking to upgrade our existing Angular version from v5 to either the latest version 12 or 13. After conducting some research, I believe that transitioning directly from 5 to 12-13 may be too significant. What would be the most effect ...

The functionality of the System JS map is not functioning properly

Despite the challenges I face with System.js, I find it to be a valuable tool that I prefer over alternatives. This is my current System.js configuration: System.config({ packages: { app: { format: 'register' ...