Angular 9/8 Percent Pipe Example | Percent Pipe in 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 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…