This post is focused on decimal pipe in angular 9/8/7 example. I’m going to show you about number pipe in angular example. you can see angular number pipe decimal. you will learn angular decimal pipe example. Here, Creating a basic example of angular number pipe example.
In this tutorial i will provide you full example and how to use angular decimal pipe with date format and locale. you can use it in angular 6, angular 7, angular 8 and angular 9 application.
I am not going to explain more and more description but i will simply give you syntax and some small examples so you can easily use it in your application.
Syntax:
{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}
No Parameters Example
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
<p>{{ mynumber | number }}</p>
</div>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
mynumber: number = 10.123456789
}
Output:
10.123
digitsInfo Parametger Example 1:
I will give you simple example how to pass and use digitsInfo parameter.
Syntax: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
<p>{{ mynumber | number: '1.0-4' }}</p>
</div>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
mynumber: number = 10.123456789
}
Output:
10.1235
digitsInfo Parametger Example 2:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
<p>{{ mynumber | number: '3.1-3' }}</p>
</div>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
mynumber: number = 10.123456789
}
Output:
010.123
digitsInfo Parametger Example 3:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
<p>{{ mynumber | number: '3.2-2' }}</p>
</div>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
mynumber: number = 150000.123456789
}
Output:
150,000.12
locale parameter example
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
<p>{{ mynumber | number: '3.1-3' :'fr' }}</p>
</div>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
mynumber: number = 10.123456789
}
I hope it can help you...
Do you like below Tutorials ?
- Angular Use CKEditor Example Tutorial
- How to Use Multiple Select Dropdown in Laravel?
- Angular 9 Image Upload with Crop Example
- Files Upload on Button Click in PHP Dropzone Example
- PHP Dropzone Allow only One File to Upload Example
- PHP Dropzone Allow only Images to Upload Example
- PHP Dropzone Delete Uploaded File Example
- Livewire CRUD Laravel 7 Example