Angular 10/9/8 Percent Pipe Example | Percent Pipe in Angular

By Hardik Savani | April 10, 2020 | Category : Angular


This article i will explain you about angular percent pipe example. we will use a angular percent pipe. This post will give you simple example of percent pipe angular example. you can see angular percent pipe format.

In this tutorial i will provide you full example and how to use angular percent pipe with date format and locale. you can use it in angular 6, angular 7, angular 8, angular 9 and angular 10 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 | percent [ : digitsInfo [ : locale ] ] }}

No Parameters Example

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

@Component({

selector: 'my-app',

template: `<div>

<p>{{ myNumber | percent }}</p>

</div>`,

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

myNumber = 0.50;

}

Output

50%

Example with Parameter: '3.1-4'

we will pass one parameter for formate as like bellow:

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

In our example you can see parameter values:

minIntegerDigits: 3

minFractionDigits: 1

maxFractionDigits: 4

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

@Component({

selector: 'my-app',

template: `<div>

<p>{{ myNumber | percent: '3.1-4' }}</p>

</div>`,

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

myNumber = 0.50;

}

Output

050.0%

Example with Parameter: '4.4-4'

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

@Component({

selector: 'my-app',

template: `<div>

<p>{{ myNumber | percent: '4.4-4' }}</p>

</div>`,

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

myNumber = 0.50;

}

Output

0,050.0000%

Example with locale

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

@Component({

selector: 'my-app',

template: `<div>

<p>{{ myNumber | percent: '2.1-4' : 'fr' }}</p>

</div>`,

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

myNumber = 0.50;

}

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: