HDTuto.com

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



Now, let's see article of how to use percent pipe in angular 9/8/7. we will help you to give example of angular pipe percentage. We will look at example of angular percent pipe without sign. i explained simply about angular percent pipe example.

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 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 | 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...




April 26, 2020 | Category : Angular



Blog Search