PercentPipe - Angular

Transforms a number to a percentage string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.

Pipe usage

{{ value_expression | percent:digitsInfo:locale }}

API

class PercentPipe implements PipeTransform {
  constructor(_locale: string): PercentPipe;
  transform(value: string | number, digitsInfo?: string | undefined, locale?: string | undefined): string | null;
  transform(value: null | undefined, digitsInfo?: string | undefined, locale?: string | undefined): null;
  transform(value: string | number | null | undefined, digitsInfo?: string | undefined, locale?: string | undefined): string | null;
}

constructor

PercentPipe

@param_localestring

@returnsPercentPipe

transform

3 overloads

@paramvaluestring | number

@paramdigitsInfostring | undefined

@paramlocalestring | undefined

@returnsstring | null

@paramvaluenull | undefined

@paramdigitsInfostring | undefined

@paramlocalestring | undefined

@returnsnull

@paramvaluestring | number | null | undefined

@paramdigitsInfostring | undefined

@paramlocalestring | undefined

@returnsstring | null

Description

Transforms a number to a percentage string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.

Exported by

CommonModule

Usage Notes

The following code shows how the pipe transforms numbers into text strings, according to various format specifications, where the caller's default locale is en-US.

@Component({
  selector: 'percent-pipe',
  imports: [PercentPipe],
  template: `<div>
    <!--output '26%'-->
    <p>A: {{ a | percent }}</p>

    <!--output '0,134.950%'-->
    <p>B: {{ b | percent: '4.3-5' }}</p>

    <!--output '0 134,950 %'-->
    <p>B: {{ b | percent: '4.3-5' : 'fr' }}</p>
  </div>`,
})
export class PercentPipeComponent {
  a: number = 0.259;
  b: number = 1.3495;
}