Angular digit organization - adding a space between each grouping of a thousand

Question

Angular digit organization - adding a space between each grouping of a thousand

In the process of formatting numbers, I am encountering different scenarios - some are directly defined in the HTML template, while others are fetched using @ViewChild textContent in TS. The desired format is to display numbers like this: 1 213.00.

Specifically, after each thousand, there should be an empty space.

I am looking for a solution that can be applied in both HTML and TS. How can I achieve this flexibility?

Your assistance is greatly appreciated!

angular typescript

Answer 1

Answer №1

Develop a personalized pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'modifyComma'
})
export class ModifyCommaPipe implements PipeTransform {

  transform(value: string | null): string {
    if (value !== undefined && value !== null) {
      return value.replace(/,/g, " ");
    } else {
      return "";
    }
  }
}

Next, use the pipe in your template:

{{ decimalValue | number | modifyComma }}

Here, the number is Angular's predefined decimal pipe.

In your component:

import { DecimalPipe } from '@angular/common';
import { ModifyCommaPipe } from 'your-custom-pipe-path';

constructor(private decimalPipe: DecimalPipe, private modifyCommaPipe: ModifyCommaPipe) {
}
...
decimalValue = 1234567;
this.modifyCommaPipe.transform(this.decimalPipe.transform(this.decimalValue))

Answer 2

Develop a personalized pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'modifyComma'
})
export class ModifyCommaPipe implements PipeTransform {

  transform(value: string | null): string {
    if (value !== undefined && value !== null) {
      return value.replace(/,/g, " ");
    } else {
      return "";
    }
  }
}

Next, use the pipe in your template:

{{ decimalValue | number | modifyComma }}

Here, the number is Angular's predefined decimal pipe.

In your component:

import { DecimalPipe } from '@angular/common';
import { ModifyCommaPipe } from 'your-custom-pipe-path';

constructor(private decimalPipe: DecimalPipe, private modifyCommaPipe: ModifyCommaPipe) {
}
...
decimalValue = 1234567;
this.modifyCommaPipe.transform(this.decimalPipe.transform(this.decimalValue))

Angular digit organization - adding a space between each grouping of a thousand

Answer №1

Similar questions

Angular 6 - Accessing grandparent methods in grandchild components

Creating multiple ngApps in Angular 4, 5, or 6

typescript: textual depiction of a generic type T

Creating unique angular index.html files

Removing a particular item from an Observable of arrays containing any type

Reactive form enabled for Angular control

Creating a merged object from a split string array in TypeScript

Issue with Angular App: Bootstrap navbar not displaying on smaller screens

Combine two arrays of data sources

How should I handle a situation where the placeholder type is set as a string, but the actual value is a number?

I am interested in utilizing Template literal types to symbolize placeholders

Using npm and systemjs as a build tool in an Angular 2 app (RC 5): A step-by-step guide

Is there a method to implement retries for inconsistent tests with jest-puppeteer?

Tips for ensuring the reliability of unit tests when testing an OnPush component in Angular with fixture.detectChanges()

What is the best way to check the API response status in NextJS13?

Guide on accessing the afterClosed() method / observable in Angular from a Modal Wrapper Service

"Embedding a JSON object within a script tag in NextJS: A step-by-step

Using ngIf with Promises causes a malfunction

Angular and C# working together to automatically round large numbers with decimals

Using custom elements in both React and Angular is not supported