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

Hello Devs, 

In this tutorial, we will learn Angular Percent Pipe Example | Percent Pipe in Angular 9/8/7

In this section, we will see the 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.

Follow this step by step guide below. 

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'

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;

}

May this example help you.