The decimal pipe will help us define the grouping and sizing of numbers using the active locale in our browser. Its format is as follows:

number_expression | number[:digitInfo[:locale]]

Here, number_expression is a number and digitInfo has the following format:

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

Each binding would correspond to the following:

• minIntegerDigits: The minimum number of integer digits to use. It defaults to 1.
• minFractionDigits: The minimum number of digits after the fraction. It defaults to 0.
• maxFractionDigits: The maximum number of digits after the fraction. It defaults to 3.

Keep in mind that the acceptable range for each of these numbers and other details will depend on your native internationalization implementation. Let's try to explain how this works by creating the following component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'pipe-demo',
  template: `
     <div>{{ no | number }}</div>   <!-- 3.141 -->
     <div>{{ no | number:'2.1-5' }}</div> <! -- 03.14114 -->
     <div>{{ no | number:'7.1-5' }}</div> <!-- 0,000,003.14114 -->
     <div>{{ no | number:'7.1-5':'sv' }}</div> <!-- 0 000 003,14114 -->
  `
})
export class PipeDemoComponent {
 no: number = 3.1411434344;
 
 constructor() { }
}

Here we have an example of four different expressions that showcases us manipulating the number, fractions as well as locale. In the first case, we don't give any instructions other than to use the number pipe. In the second example, we are are specifying the number of fractions as well as numbers to show, by typing number: '2.1-5'. This means we show the two number on the left side of the fraction marker and 5 on the right side. Because we only we have a 3 to the left we need to pad it with a zero. On the right side we just show 5 decimals. In the third example, we instruct it to show 7 numbers to the left and 5 to the right of the fraction marker. This means we need to pad the left side with 6 zeros. This also means that the thousand markers are being added. Our fourth example demonstrates the locale functionality. We see that the displayed result is space character for thousand separator and comma instead of point as fraction sign.

There is one thing to remember, though; for locale setting to work, we need to install the correct locale in our root module. The reason is that Angular only have en-US locale set up from the beginning. It is quite easy to add more locales though.  We need to add the following code to app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { PipeDemoComponent } from "./pipe.demo.component";

import { registerLocaleData } from '@angular/common';
import localeSV from '@angular/common/locales/sv';

registerLocaleData(localeSV);

@NgModule({
  declarations: [
    AppComponent, PipeDemoComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }